Broken columns when switching devices

Support
#1

I created 2 sections. The first section is simply a banner with a slider resolution text and image. The second section has 3 columns. I wanted to be able to overlap part of the 3 column headers over the banner background. See image below to see what I mean.

Here’s the problem: When you resize the website the 3 columns can’t scale on smalller devices because I haven’t learned how to do that.

In order to get the column to scale above I had to use a margin-top: -135px; < but this piece throws everything off when you scale down.

.my-column {
border: 1px solid white;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
margin-top: -135px;
margin-right: 1.7em;
}

The text doesn’t properly scale either. Similar to the columns I had to use margin in order to get the text to move in the right area but when you scale down this piece of CSS breaks too.

.x-column .p-column-style p {
margin-top: -0px !important;
margin-left: 40px !important;
margin-top: -80px !important;
text-transform: none !important;
color: black;

So is there a way to allow the content inside the columns, along with the actual column position to scale. I’m 100% sure that margin CSS is breaking it but I don’t know any other way to design this in CSS.

#2

Hi There,

1.) Let’s add the following CSS too that will reset -135px margin to zero when the columns start to stack up on top of each other.

    .my-column {
       margin-top: 0px;
    }
}```

Then this CSS to make add spaces on left and right part of the paragraph text:
```.x-column .p-column-style {
    padding: 0 40px;
}```

Update this part:
```.x-column .p-column-style p {
    margin-top: -0px !important;
    margin-left: 40px !important;
    margin-top: -80px !important;
    text-transform: none !important;
    color: black;
}```
To this:
```.x-column .p-column-style p {
    margin-top: -80px !important;
    text-transform: none !important;
    color: black;
}```
We don't need the margin left because we have added space using the padding on previous CSS.
Also remove the margin right property from this custom CSS:
```.my-column {
    border: 1px solid white;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    margin-top: -135px;
    margin-right: 1.7em;
}```
Like this:
```.my-column {
    border: 1px solid white;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    margin-top: -135px;
}```
Margin right will disrupt the default responsive size of columns.

Hope this helps.
1 Like
#3

Thanks! Do you know if there is a way to set certain layouts for different devices. For example, our computer layout looks correctly but if scale down to a laptop our columns don’t align correctly with the section 1 image banner. I wonder if I could impliment CSS for certain device resolutions( I think that’s the correct way to say it).

#4

Hi there,

I suggest that you use the Hide Base on Viewports section to hide the element on certain devices and add proper sections to show on those specific ones.

You can see those options on each section:

This way you have complete control of which you want to show and alternatives of it for different devices.

Hope it helps.