[Resolved] Align Layout / CSS with ddl-full-width-row for mobile resolution

[Author]

Posts

[Mario]

I created two div boxes with Toolset-Layout. See Screen.
In mobile resolution view, i have padding left or right, coming from class 'ddl-full-width-row row'.

So how could i align this boxes (with green buttons) perfect to right an left border?

Page:
hidden link
I read for example
https://toolset.com/documentation/user-guides/creating-responsive-designs/

Thank you for pointing me in the right direction.

[Shane]

Hi Mario,

Thank you for contacting our support forum.

From your screenshot I see that you want to align to 2 boxes beside in other on what seems to be a mobile screen.

This wouldn't be possible because the screensize is too small to allow for 2 boxes to be placed beside each other.

They should reflow like that for a larger screen like an Ipad but not so for smaller screens.

Thanks,
Shane

[Mario]

Shane, thanks for answering quickly.

No not besides, just in one column.
My problem ist that "ddl-with-class" inserts this padding:0 and i couldn´t disable this ddl class.
Could choose 'Row as wide Bootstrap', but this produces unfortunately other problems.

[Shane]

Hi Mario,

I see the issue with the alignment now.

Try using this css

.ddl-full-width-row>[class*="col-"]:first-child
{
    padding-left: 14px;
}
.ddl-full-width-row>[class*="col-"]:last-child {
    padding-right: 13px;
}

Please let me know if this helps.
Thanks,
Shane

[Mario]

Thank you Shane, that works perfect. Great.
But a little bit confused. Why is this necessary? Do i do something wrong?

[Shane]

Hi Mario,

Actually I fixed it using CSS but the correct method was here:
https://toolset.com/documentation/user-guides/creating-responsive-designs/#how-to-set-up-larger-margins-for-extra-small-devices

I didn't think you did anything wrong but the offset was needed to be set.

Thanks,
Shane

[Mario]

thumbs up.