I am trying to make this work with various screen sizes. It looks great on my iMac but the computer image and the background do weird things when I shrink the screen size.
I also want the section to be shorter so it isn’t taking up so much of the page.
Hi There,
The height of the section will depend on its content. When the screen gets smaller, the content gets longer. With this, the background will try to cover the longer section now. Try to implement Responsive Text on Headline and Text element. This will adjust font size on smaller screen thus reduce height content responsively. 
Other option is to use HIDE DURING BREAKPOINTS property. It is available each ROW, SECTION and version 2 elements under Customize Tab. Hide current section on smaller devices, then add another section to show on smaller screen only. This time, set another background image. Preferably, a vertical type image that will work on longer content.
Hope this helps.
I don’t see where this page is in the screenshot; how do I get there?
Hi There,
Responsive Text feature is under the Settings (https://prnt.sc/h04tta)
But before you fiddle with the Settings, let me clarify your issue first because we are not entirely certain about it. This is what do you mean weird things things, right?
The issue with that is because the background-image is not covering the entire section which is supposed to do. So go check your background-image settings and be sure to set the size to cover (https://prnt.sc/h04vjh)
Hope it helps,
Cheers!
That is helpful, but the image is still being cut off when the screen size is reduced.
Also, even though I am reducing the image size the section height is still the same. I don’t want it to be so tall and take up so much space. How can I make the height shorter and still have the contents inside of it show up properly on smaller screen sizes?
Thank you!
Hello There,
Thank you for the clarifications. The section height is taller because of your top and bottom margin which is 190px. All in all that is roughly 400 pixels high, the height of the contents is excluded. I would recommend that you use percentage margin maybe like 20% so that it is more responsive.
Hope this helps. Please let us know how it goes.
Can you tell me why my images are not mobile responsive? I pull this page up on my phone and the image is cut off:
I’m not seeing where the top and bottom margin is 190px and where to change it
Hi There,
Did you redo your home page? I don’t see the section from your screenshot now. And how can we view this page (http://reviewuspro.com/advantage-inspection-service/) without giving a review?
Are you referring to the background-image being cut-off? That is actually how background-images works, by default bg-image is set to cover (please read here what the cover value does to the bg-image ), you can not set your bg-image to contain either because that is not going to cover your entire section. See my screenshot above, that is the result of the image that is not covering the entire section.
We can simply say, we can not fit a landscape oriented image on a portrait container. Example this image (https://reviewuspro.com/wp-content/uploads/2017/10/Thumbs-Up-Orange.jpg) you can not fit this on a mobile screen (portrait view) without being cut or being stretch and squeeze.
If there is something on the the bg-image that you need to emphasize then you might consider not using it as an background but an image element, like your other computer image.
Sorry I can not provide an input on this, as I said above I could not find that section on from your screenshot anymore. Please clarify.
Thanks,
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
