Left/Right Padding on Mobile version for Horizontal Lines in grid

[samvelenne]

Hi,

I was busy developing my website and hit a roadblock.
When i look at the mobile version there is padding on the left and right side of the rows in the grid.
When i set the padding to 0px for the following (and right side):

@media (max-width: 600px)
.lay-content.nocustomphonegrid #grid .row, .lay-content.nocustomphonegrid .cover-region-desktop .row, .lay-content.footer-nocustomphonegrid #footer .row {
padding-left: 0px;
}

everything has no padding, but i only want the padding to be 0px for the horizontal lines and i want the text etc. to keep the padding. How could i solve this. I don't stumble upon this issue in the desktop version, it's only on the mobile version that the horizontal lines don't 'bleed' from the page.

I wish i could share the website with you, but it's not online yet.

With kind regards,

Sam

[Richard]

Dear Sam

@samvelenne

"When i look at the mobile version there is padding on the left and right side of the rows in the grid."

Are you not able to set this padding within your phone layouts Frame settings?

"but i only want the padding to be 0px for the horizontal lines"

Maybe i have mis-understood and even with the frame settings set to 0 the horizontal lines are still a smaller width (that is the issue you are talking about)

The following should help you with applying custom CSS to just the horizontal lines:

body #custom-phone-grid .lay-hr { 
}

---

Hope this helps Sam & best wishes ✨

Richard

[samvelenne]

Thanks a lot Richard, this helped solve the issue!
All best and thank you again, Sam

[Richard]

@samvelenne

Great to hear Sam! Have a wonderful day & thank you as always for supporting Lay Theme ✨

[Remco van Dun]

@samvelenne
Same thing I was looking for!
Do you mind sharing how you got it to work?
Been trying a little but the solution suggested above didn't work yet.

[Richard]

Dear @Remco-van-Dun

You are having issue with the Horizontal Lines on Mobile?
( Something similar?)

Wish to help if i can, are you able to post a link to your website?
What exactly needs doing with the Horizontal lines 🌝

---

Talk soon & best wishes Remco

Richard

[Remco van Dun]

@Richard
Thanks for asking.

On this temporary website you can see what I was trying to achieve.
https://reneebus.remcovandun.nl/under-the-beech-tree-i/

Underneath the carousel there's a horizontal line that becomes a line with padding on both sides when switched to mobile. I'd like all horizontal lines to go from edge to edge of the device. I've stretched the line over the gridder's edge to the max width...

Strangely the line in footer (a page) underneath each project info somehow works fine? Which is made the same way?

EDIT: Oh I remember, I've made a custom phone layout for the footers... which I dont want to do for every project, so was wondering if there's a way to overrule the horizontal line padding so it goes full phone width without a custom phone layout?

[Richard]

Dear Remco

@Remco-van-Dun

Will need to see if this suits with some tests, hope there are no bugs :)

The horizontal line is 100% of it's parent container (row). It's parent container is not 100% of the total browser width. The row has a left & right padding of 5vw. Give the horizontal line a width of 100vw ( calculated as 100% of the viewport width (browser width) & then move it left 5vw to match the padding.

.lay-hr {
    width: 100vw;
    transform: translateX(-5vw);
}

The above code is likely added to > Lay options > Custom CSS & HTML > Custom CSS for mobile >

If problem occurs you may need to specify with:

.row .lay-hr {
    width: 100vw;
    transform: translateX(-5vw);
}

Result - Full-width horizontal line:

---

Best wishes Remco & happy new year! ✨

Richard

[Remco van Dun]

@Richard

Thanks again for your help, that seems to have done the trick!

[Richard]

@Remco-van-Dun

Wonderful! best wishes ⭐️