Mobile Sections and Images not responsive

Support
#1

I’m unable to find topics on this issue and would love some help. On desktop for https://cropolis.co/home-2/ I have three sections at the bottom of my page with and image in one column and text in the other column of the row. On Mobile these images do not respond well and expand beyond their sections and cover up text.

What is the best way to handle this issue? I assume that I am doing something wrong and it should be a quick fix.

Here is an image of the weird overlap:
Mobile Screenshot Highlighting Errors in red box

Additionally, is there an easy way with cornerstone to set columns in a row equal height and to vertically center their elements?

Additionally additionally, is there an easy way to stack a right-side element on top of a left-side element when the screen width reduces to mobile?

Thank you for any and all help!!!

#2

Hi There,

Thank you for writing in, yes all of that is possible if we can clean your markup first.

To do this please copy your entire Theme Options > CSS and check it here (http://csslint.net)

There you’ll see 2 errors. At line 56 with the extra semicolon ; please remove that. And at the line 12 you have a @media (min-width: 980px) { which you did not closed. Meaning you’re missing 1 closing bracket } somewhere, this can easily be solved by adding the missing closing bracket, but its only you who knows where this @media block ends. Please add the closing bracket.

Then remove the height: 90vh; you applied to the sections because that was the reason why your columns are overlapping on mobile view.

Only then you can add this to Theme Options > CSS.

.fcc {
	min-height: 90vh;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

@media (max-width: 767px) {
	.f1 {
  		order: 1;
	}
}

Add the CLASS fcc to the ROW of your 2 columns.
And add the CLASS f1 to the left-column with text (1st and 3rd ROW).

If you feel that your text columns were not vertically centred. Please remove the unnecessary top and bottom padding that you applied to the Columns.

Let us know how it goes,
Cheers!

#3

Wow! THIS WAS SO HELPFUL!

Thank you so much. I didn’t remember or realize I had thrown in the height: 90vh; and I appreciate all the detail that you put into your reply.

#4

You’re welcome :slight_smile:

#5

One more thing,

I’m on a mac, and when I use Safari instead of Chrome -These three rows appear stacked as if they were mobile and they are no longer ordered like the code you provided.

Is there a simple fix to this?

#6

Hi there,

Please also add the code below at the end of the suggested code:

@media (min-width: 768px) {
 .fcc > .x-column {
    max-width: 47%;
}   
}

The problem with the Safari browser is that you need to exclusively set the max-width percentage for the columns inside the Flex Box displayed parent item.

Thank you.

#7

Thank you again! You are a life saver

1 Like
#8