How to make images look good across screen sizes

Support
#1

Hi, I created this image here: https://palilastudio.com/rain/
It looks bad on phones. Do i A) hide that section on phones and recreate a section for phones adjusting everything so it looks ok.
Or do I B) use @media and resize things that way? Im new to the whole @media thing and I cant figure out how to do it.

Also other question. On that page you will notice the clouds aren’t the full width of the page. How can I make them full width like the rain?

TIA
Rena

#2

Hi Rena,

You can use media queries or hide the containers based on screen width on the customize tab of the row.

To extended the image to the edges, click on your row and turn off column container.

Your image does look great on desktop on mobile on my end.

Please clarify the issue :slight_smile:

Thanks

#3

Thank you for your help. I resolved the mobile thing. But as for the cloud reaching the sides of the screen. I checked the column containers and they are off. When I adjust the site width in the customizer to 100% it reaches the edges. But then the rest of my site looks like a mess. I just want this specific page to be 100% width. How can i do that?

Thank you again,
Rena

#4

Hi Rena,

Before anything else I would like to say; that entire raining effect is Awesome!

To resolve the clouds not spaning to the edge, please keep the ROW’s Column Container option OFF. Then change your Page Template to Blank - No Container, Header | Footer, it’s under Settings > General


Hope that helps,
Cheers!

#5

Thank you!!! : D

And thank also for resolving my issue :slight_smile:

1 Like
#6

You’re welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.