Hey there,
I see that on mobile pages I have like 20px padding on the sides. Is there a way to set it to a different value globally?
Hello!
No, you should change it on each row. Or you can also copy-paste the style of the first row modified to the others. Right-click on the row copy style, right-click on the second row and paste the style.
Thank you!
How can I achieve 10px on the sides? I am trying all sorts of stuff but it just doesn’t look right… Can you please guide me?
Hello!
Click on the row and check the row’s CSS tab: https://app.screencast.com/mVusXjsq6Sdmo (stretch row and 1200x content)
We have some settings for the rows and different stretch sizes: https://www.screencast.com/t/bsbB5P97A
Thank you!
Maybe I wasn’t specific enough. What I want to achieve is the following.
Imagine I have a row with a column and a Flex Block inside of it. Once you open the mobile version of the side – there is a 20px gap on the sides.
I want to turn this gap into 10px gap.
This is the gap I am talking about – https://ibb.co/DJNrrP3 and if I follow your guidance it becomes the exact opposite of what I want – https://ibb.co/8LWfLYSc
I want the initial padding to become 10px.
I tried doing what you said but it doesn’t result in what I need
https://ibb.co/bMyTF63T – here I coloured the zone yellow, the row green and the column red. Stretch row 1200px is set. The stretch row option is not enabled. There are no paddings, widths or whatever set.
I tried switching the stretch row checkbox on and off still nothing happens. Maybe I am doing something completely wrong…
Hello!
You can change those gaps from the CSS tab of the flex block element and set 10 as you wish in the mobile viewport: https://app.screencast.com/kwRzG1ybPwtHv. Those values are responsive and can be changed easily on each viewport from the Tagdiv Composer desktop, tablet landscape/portrait, and mobile.
Thank you!
I want to do the exact opposite. Check the image with the colored zones. I want to make the green zone twice smaller. To reduce it from 20px to 10px I dont want to have an extra 10px making it 30px.
I want the row and column width to match full screen on mobile and the element inside of them to have 10px padding on its sides. Resulting in only 10px empty spaces on the sides instead of 20px.
Hello!
Then apply the margins to the element -10px left and -10 right.
I hope that helps you!
Thank you!
Hey there!
I think there is something wrong – I wrote that I am using a Flex Block but I was wrong – I use a Flex Block for Desktop and a Posts Loop for mobile.
What you suggest works for Flex Block but when I try to do the same thing for Posts Loop it doesn’t work. I recorded this video for you – https://www.loom.com/share/dadc8b127e5548c596817458224c3594?sid=ccebb966-fd58-42da-8c76-4dd0ef171572
You can see that I use the exact same settings for both elements but one of them doesn’t look right.
Is this a bug or?
Hello!
Ah, ok. They are different elements with different styles. The posts loop has 100% width by default. So, you should add the width auto for the posts loop: https://app.screencast.com/FumD9C7wZSYv2
In the CSS there, you can simply add -10, not -10px.
Thank you!
Hey!
Thanks! Worked like a charm.
I was starting to think I am crazy…
Thanks a lot once more!
Hello!
Happy I could be of help!
Have a nice day!
