Site logo

Archived topic

aligning a column to be full-width on mobile

5 replies · Started by Melissa on September 12, 2019

Viewing posts 1–6 of 6

Hi,

On this page, I'm currently displaying 2 columns in the area below the top orange strip. They stack on mobile just as I want them to. But I'd like the second column to be full width on mobile (the image and the background color).

https://theslowroad.org/housesitting/

Can you help out? Thanks

Hi there,

Did you get this sorted? It looks great on mobile to me.

Let me know :)

No, haven't worked it out. What I want is for the photo and blue box to bleed to the screen edges.

Hi there.

you could try this:

.page2_row2_column2 {
    width: 100vw;
    margin-left: -30px !important;
}

Just add it inside your mobile media query. You may want to give that element a specific class to set this style.

Perfect. Do I do the same thing to stretch images edge-to-edge on mobile?

For mobile only wrap it like this:

@media (max-width: 768px) {
    .page2_row2_column2 {
        width: 100vw;
        margin-left: -30px !important;
    }
}
This archived topic is closed to new replies.