Hello, I am still having issues with some aspects of my site that are not responsive. These include my About Me page and the first picture displayed in my case studies when you click into the case studies. Everything else is responsive, besides these items. Any tips on fixing these issues on my Webflow template?
The issue with the images is due to the 200vh size you’re using for the height, so adjusting this to be something smaller (maybe something like 50-80 depending on the look your going for) will work better:
In terms of the overflow on the About page, this is due to some negative margins and set widths that you’ve added for the text content that breaks it outside of the .wrap-content parent container:
Just make sure you’re adjusting those values on the breakpoints where you notice the issues and the changes will cascade down to each smaller breakpoint.
It’s good to use dynamic values (%, VH/VW, EM) if at all possible instead of fixed values (PX)—but most of the time you can prevent issues by adding a max-width as well (something like 100%) which will prevent the content from spanning X% of it’s parent container/element.
Thank you so much for all your help! On the oversized pictures, I adjusted the vh to 80, but it still is coming out weird on my mobile phone. I want the whole picture when you look at it in the mobile version. How would I go about doing this?
If you want the whole image to show without a crop, it’s going to be a little more tricky as you’re using a background image instead of an image element.
You can go into the background settings for the .wide-background element and set it to “contain” and no tiling, however the height will still be determined by the value you set for the container itself—allowing the background color to show through:
If your images are a set ratio (meaning they’re all 3x4, for example) you can use a trick to make the container match that ratio however it involves changing some of the settings a bit. Set the height of your .wide-background element to 0 and use a top-padding percentage that corresponds to the ratio (for our example, the top padding would be 133.33% - or the height divided by the width times 100). You can read more about fixed and fluid aspect ratios for background images here.
In the example below I’ve adjusted this value a bit so the top padding is 120% (which works for the image your using on the BofA project) however this will only work if the images are standardized:
An easier way to go about this would be to use an image element instead, which will retain the aspect ratio automatically as long as you keep the height of the element set to “auto”, however this would require a bit of modification to your collection template.
Let me know if you run into any issues or have any other questions!