Little CSS Help

Support
#1

What CSS could I use to get these 3 columns to stack on anything from tablet size and smaller?

Thanks in advance!!!

#2

Hello @piexec,

Thanks for asking. :slight_smile:

I testing your website and it seems to be working fine. Please see screencast. https://cl.ly/2a1X1w3O2q2o

Only thing that I can suggest is that you can have spacing in between columns when on smaller devices. To do that you can have following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .page-id-42 .x-column {
    margin-bottom: 10px;
}
}

To find post/page id, you can take a look at following resource.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Thanks for the videos. Yes, I know the columns stack on mobile. I want them to break and stack sooner though, on Wide Tablet size and lower. Basically, only 3 columns should display on Desktop and Laptop sizes.

#4

Hello @piexec,

Thanks for updating the thread.

Unfortunately that will fall outside the scope of support we can offer as it will require making numerous changes in CSS viewports that will fall in custom development category and more so it’s something we don’t actually recommend.

I can suggest you some resources that you can take a look to get started with media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.youtube.com/watch?v=2KL-z9A56SQ
https://www.youtube.com/watch?v=dIaEPWbogNI

Thanks for understanding.

#5

I think you’re misunderstanding me…

On another page, I’m breaking 4 columns into 2 using:

@media (min-width: 481px) and (max-width: 1400px) {
#the-row .x-column {
    width: 100%;
    float: left;
    margin-right: 4%;
}

#the-row2 .x-column {
width: 48%;
float: left;
margin-right: 4%;
}

#the-row .x-column:nth-child(2n) {
    margin-right: 0;
}

}

I only need to make 3 columns break into one using something similar.

See video:

#6

Hello There,

Thank you for the clarifications. To make the 3 columns into one column in tablets and smaller device screens, please use this code:

@media(max-width: 1024px){
    .x-container.max.width.plans .x-column {
        float: none;
        width: 100%;
        margin: 0 auto 20px;
    }
}

We would loved to know if this has work for you. Thank you.

#7

Worked perfectly thank you very much!!!

#8

You are most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.