Issues Accomplishing Layout

[LNUredi]

Howdy!

I am trying to accomplish a fully responsive version of this design/layout: www.forkc.org.

Specifically the sections causing me problems are the images with the curved edges with the white text boxes laid on top.

It looks great in desktop but in mobile we have some issues (the text boxes at the bottom have an overflow/overlap problem, and the fact that I’m using min-height to show the full background image is causing weird gaps on mobile).

I have my container set to “contain” and “center” for bg size and position.

I have tried the following solutions:

1. Changing the min-height on the containers using media queries in a child theme. The div changes size but the image doesn’t resize as expected and we get overlapping of sections, weird margins, etc. No example to show at this moment but I could try to recreate if needed.

2. The handy “responsive background image” solution that consists of setting the container height to 0 and adding padding-bottom in a percentage appropriate to the aspect ratio of the image. I creating a class called .swoosh and assigning it to the containers but it seems to be overwritten.

My CSS looks like the following:

.swoosh{margin: 0 30px; height: 0; padding-bottom: 76%:}

(doesn’t work: (no idea why this div is laying on top of the other one):

3. I’ve then tried various types of positioning rules on the white text box to get it to sit at the farthest left edge (left: 0) with a top positioning of approximately 50%.

I can get it working in desktop (as seen by our live site) but when I resize in mobile, it all goes to hell lol.

What I want is:

A fully responsive background image that shows the curved edges of the image (so contain, not cover) that resizes smoothly without cropping or overlapping with the white text boxes and text to resize accordingly while holding their position of being approximately half way down the image and approximately 33% of the width of the image.

Our current solution where the white box goes to the bottom of the image is also fine, but I need there to be no overflow or overlap.

I’ve explored all the typical solutions for overlapping–clearfix, etc. and am either being overwritten by the theme’s code or missing something obvious.

[Prasant]

Hello @LNUredi,

Thanks for asking.

Upon visiting your website I am getting bunch of 404 error. Specifically related with the images. Here is how website is looking on my end. https://cloudup.com/c9X3laUpWF6

Can you please fix the image links and update us? So that we know how the layout is panning on mobile devices and accordingly we can point you in right direction.

Thanks.

[LNUredi]

Hey there,

That’s not the right link. I don’t know how that happened.

The website I’m referring to is here https://forkc.org/

Give that a try, please.

[jumar]

Hello there,

Before we proceed with giving pointers on how to fix and achieve the layout, can you share to us your Wordpress User/Pass in a secure note? This is mainly so we can take a closer look with the classes you’ve added as well with your setup.

About the overwritten CSS codes, I strongly advise you add all your CSS codes to X >Theme Options > CSS. This is to ensure that no CSS override conflicts will happen between what is on Global CSS and Customizer. Another reason also is that CSS on Theme Options will be prioritized.

Thank you.

[Alaa]

Hi LNUredi,

I’ve checked your website and on the Desktop, I couldn’t see the overlapped layers, this is how I can see them:

On mobile devices, this is how I can see your images:

Could you please apply any of the solutions you mentioned and add the CSS code in the page content CSS in Cornerstone as in this screenshot:

This should avoid any overriding issues, if you think the theme is still overriding these rules, then please let us know so we can investigate this issue.

Thanks.

[LNUredi]

Please go to: https://forkc.org/test-home and view it on desktop and mobile. YOu’ll see the overlap.

The main home page is working mostly but it’s not an ideal situation. If you scroll down on https://forkc.org you will see an overlap of text in the footer.

[nabeel]

Hi again,

I checked your site and I see many sections with the height 0 given inline, it’s making the content to overlap, please find the this inline CSS from all of your sections and remove it.

I also see some conflicting code in your Child Theme’s style.css file, please make a backup of your custom CSS first and remove it from Child Theme and from Theme Options > CSS section.

I also some inline CSS in your sections for you background images background-size: contain; which is making the background images really weird in mobile devices and gives a feeling of overlapping. Please check all of your inline CSS as well.

Finally make sure to purge the cache after making these changes, make sure to backup everything before removing any code.

Hope this helps!