Making image smaller on mobile

[NadiaCrisisEquipped]

Hello!

I updated my homepage and while it looks good on desktop, the image doesn’t adjust properly on mobile. How can I get the majority of the image to appear on mobile?

This is what it looks like on desktop:

And this is how it appears on mobile:

Thanks for your time in helping me resolve this.
Nadia

[NadiaCrisisEquipped]

I forgot to mention that right now I’m using the gap element to create a gap at the top of the section in order to keep the text in the middle of the image. I don’t know another way to make the text appear where it is now.

The problem of course is that on mobile, there’s a huge gap before it gets to the text… and I would prefer the entire image show (versus only the woman and child as you scroll)

Please help My website is crisisequipped.com

Thank you!
Nadia

[ruenel]

Hello Nadia,

Thanks for writing in! The image is your background image of the section. You may have a very limited option to adjust the image on a smaller screen. It is best that you check out our video tutorials on how you can make use of the background image on your site. Check it here:

With regards to your gap element, you can eliminate the use of the gap element and utilize the flexbox option in the column settings to position the headline or text elements inside the column. Kindly check out this video tutorial so that you will be more familiar with the Flexbox Option.

And please check out this documentation too: https://theme.co/docs/use-flex-layout

Best Regards.

[NadiaCrisisEquipped]

Thank you for sharing those videos. I added the column element and still cannot figure out the Flexbox option and how to customize it properly to make my image look good on mobile. Is there another video or tutorial you can point me to?

Thanks for your time and help!
Nadia

[prakash_s]

Hello Nadia,

To make the section background image look good in both mobile and larger devices you need to set the section padding-top and padding-bottom in VW unit please have look at this article

You can set the padding-top and padding-bottom around 25VW. Please feel free the change the padding value as per your design.

Please have a look at the screenshot below.

Hope it helps
Thanks

[NadiaCrisisEquipped]

Yes that works really well! The background image looks so much better!

The last issue I’m having, and I hope this is not too much of a problem to fix , is that when I change the value to 25 VW, it moves the heading element to the middle of the image, like this:

and I would like to adjust it so that it is above the faces like this:

Please help Thanks so much!!

[ruenel]

Hello Nadia,

I have checked your homepage on a smaller site and it looks like you already have resolved the last issue. The headline text is now above the people in the background image. Here is what I am seeing right now.

If you are still not seeing, you maybe have a caching issue. After doing the updates and saving all your site changes, always remember to clear all caches since you are using WP Rocket so that the code and your latest site changes is always in use. This will help you to avoid any potential errors. And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

These links might help:

• https://docs.wp-rocket.me/article/133-manually-clear-wp-rocket-cache
• https://docs.wp-rocket.me/article/53-clear-wp-rocket-cache

[NadiaCrisisEquipped]

Thank you so much for all your help and clarification I appreciate your time!

[ruenel]

You are most welcome Nadia!