Rows with and without containers lined out on mobile

Support
#1

Hi,

I would like to have help learning how to create Rows in my website that have containers combined with Rows with no containers - and give them the correct outer space on the mobile version - Without creating a complete new mobile verion.
I will try to explain what I mean.

F.i. large screens: (the row with picture of 2 men left - and text right is set with global container off.

Schermafbeelding 2020-11-19 om 13.34.58
Schermafbeelding 2020-11-19 om 13.34.581200×643 155 KB

On mobile screens this will show as:

Schermafbeelding 2020-11-19 om 13.35.26
Schermafbeelding 2020-11-19 om 13.35.26800×1014 455 KB

For the picture it is oke that there is no space left and right.
The text under the picture shows directly on the left side - there is no space … (all the other rows - with container) have the correct space on the left side.
The gab that is set in the Row - does not show on mobile - I get that.

Is there a way to create a ROW for large screens - set as no container because I want to have the picture that way - that after the breaking point for mobile devices does have the correct space at the left side?
We also have ROWS without containers that have the text on the left and the picture on the right side.

I hope I have explained myself good enough, so you understand what I want to create.

Thanks in advance.

#2

Hi Liesbeth,

Thanks for writing to us.

Unfortunately the option of adding spacing in breakpoints not available at this moment.
Kindly duplicate the row and use the container in the second one. Then hide the first row for smaller screens and the second one for larger screens. You can hide rows from Row -> Customizer -> Hide During Breakpoints.

sattya-Content-Pro
sattya-Content-Pro293×518 12.6 KB

Hope it helps.
Thanks

#3

Thanks you for your answer… but this is nog doable / workable for the large and multi-langual site…

What I do now is - for Rows with no global container:
Set the ROW gap width: to 0
And the Column Padding to 7.5% to the left side (the side width of the website is set to 85% - so 7.5% free on left and right side).

That gives a good white space on the left side of the mobile site for pages with combined rows (with and without global container). As far as I see.

Thanks

#4

Hey Liesbeth,

In this case you need to use CSS media queries to add padding to the sections just in smaller screens, to do this assign a class to all of your sections that has Global Container turned off e.g mobile-padded-section and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .mobile-padded-section {
        padding: 0 45px !important;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#5

Thank you so much! I will look into this.

Have a great day!
Liesbeth

#6

You’re welcome, Liesbeth.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.