Responsive Image size

Responsive Image size

  

I'm working on a webapp and in this app is a logo (image).
This logo is 500 px wide.
Which looks fine on desktop. On mobile however this gives me scrollbars, as the logo is also shown as 500px wide.

How to include an image so that it is responsive in size? Can this be done with sizing the containers?

What I tried:
- When I try to give the image a width of 100%, this will fix the problem for the mobile, however for desktop the image than takes the full width (around 1000px).
- In Webpatterns there is a ResponsiveImages webblock, but this seems more for different images. I just want the same image in different sizes.

Hi Paul,

In the ResponsiveImages you can insert the same images and just give them different widths. That should do it.

Cheers,

José

Hi Paul,


You coukld use a media query to change the size or the image depending on device, orientation etc,. something like

SyntaxEditor Code Snippet

@media screen and (max-width: 480px) 
{
    .image-container {
       width: 100%;
     }

}


José Costa wrote:

Hi Paul,

In the ResponsiveImages you can insert the same images and just give them different widths. That should do it.

Cheers,

José

Aye, this however doesn't look nice in Service Studio. And kinda seems like this webblock is being used for another purpose then it's intended for.

I was just wondering if there is a way to do it with the containers in an easy low-code way.

Keith Matthews wrote:

Hi Paul,


You coukld use a media query to change the size or the image depending on device, orientation etc,. something like

SyntaxEditor Code Snippet

@media screen and (max-width: 480px) 
{
    .image-container {
       width: 100%;
     }

}


Well yeah, but this kinda defeats the idea of having a low-code platform who does it for you.


Solution

For now I solved it by putting the following expression on the 'width' of the image.

SyntaxEditor Code Snippet

If (IsPhone(),
    "100%",
    ""
)

The 100% makes the image shrink to maximum width of the device.
However it also will do increase to maximum width if it has the room. So hence I needed an if statement.

Solution

Hi Paul, 

While I understand your concern with the "messy" Service Studio view, I (personally) don't like to use your approach. The reason is that is much more easy to understand what is being done when what is being done is visible.

It's like when we use the "Display" property of an element to show/hide instead of an IF widget.
The page looks better in Service Studio, but in the end, the way the browser will show our page is not the same as it is shown in the canvas, and is much more difficult to spot conditional visibility this way than with IF's.

So, I would reconsider and use the ResponsiveImages :)

(Just my opinion, of course).

Cheers,
Eduardo Jauch

Ok thank you for your opinion Eduardo.