Hey, all. I’m scratching my head over what I’ve done wrong here. My issue is with how responsive my homepage is in landscape mode. The issue is mainly with the images I have about 1/2 way down the page. I can’t get them to show up, AND at the top of the page, I can’t figure out how to create distance between the fish video and the hero banner.
Any help would really be appreciated. I’ll be coming back looking for any help! Thank you so much.
I think it’s because you’re using vh height property on elements like “.SERVICE-DESCRIPTION-3”
If you imagine 90% of the height of a phone view in horizontal format, that’s not much room. The amount of content you’re trying to squeeze in won’t fit. Change it to “auto” on phone views.
Finsweet has a cool plugin that includes Vertical Canvas Resizing to see a layout in a real-world format.
edit: now that I look back at the elements you reference, not sure my initial idea will help. I can see the images you’ve referenced. Maybe it’s different on your published page vs. the preview? Can you share the staging url?
side note: I noticed that “.service-text” > “.text.block-28” (which is set to 24.5vw) is causing the overflow that makes the site shift side-to-side slightly. Changing this to 24vw will eliminate the shifting or you can change “.service-text-div” to no overflow if you’re going for the edge-to-edge look. Cool site!
Alright, I figured it out. This will address any and all issues pertaining to disappearing/flickering images.
You can use the div with fluid size (95vw, for example), set overflow: hidden for this div and position: relative.
Then you add the image to this div with position:absolute and center it horizontally and vertically. At the same time, you set the image size in pixels, so it will not change for different devices.
Another option is, you can set the image as a background image for that div. Center it and set the size in the background image settings.