Docs

[wbgTHEMECO]

I have a row with 4 columns.

They stay as 4 columns until about iPhone/iPad width then go directly to single columns.

Is there a class I can use to have the 4 columns first break down to 2 columns, then to single columns? The 4 columns get pretty squished jut prior to going to single column.

thanks

[Joao]

Hi There,

Please add a class (any name) to the row where your columns are placed.

And provide us the URL and point which columns you are referring to.

So you would like that after certain pixels your columns break to 2 columns side by side instead staying 4 right?

Let us know thanks

Joao

[wbgTHEMECO]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px) and (min-width:480px){
.x-column.x-sm.mycol4-2.x-1-4 {
    float: left;
    width: 46%;
    margin-right: 4%;
}
}

Hope that helps.

[Rebelvideoprod]

Two years ago my boyfriend bought Theme X to do my website and the theme was very flexible with the design and we didn’t need to use the customizer or cornerstone to easily put content where we wanted it to go. So, I bought it again this year thinking I was getting the same but have been frustrate in designing a site for my client on WordPress. I am very hopeful I can get some help, unfortunately I have not been too thrilled with the suggestions made on this forum. It seems that some of the css coding suggested didn’t work at tleast on cleaning up the header area to make it look like I want. My plan was to design my own menu buttons in Photoshop, which I have, and put them in the header area of my pages. I wanted to put them where I like but do not have the coding knowledge to do that. My page currently looks like this, http://www.chinacafebelton.com/, but my client wants me to design a page looking like this, http://stircrazy.com/. As you can see the Stircrazy page has unique buttons, and they are floating in the header area. There are buttons that are smaller below also that are functioning too. Also, there is no box around the slider, which I’ve also had trouble working with. I’m very disappointed that I spent $69 on a template that I thought I could use and manipulate easily, only to find I might have to search and pay more money for something that I can do what I use to be able to do with your older Theme X.

[Rad]

Hi there,

You can add image to your menu item by adding the HTML <img> code to your menu item’s caption/label along with the text. Or you could build your menu through UberMenu. Every theme comes with the standard menu which based on WordPress standard. Customization and coding are unavoidable, especially your target design is more graphical than the standard.

This might help https://wisdmlabs.com/blog/add-images-icons-to-menu-wordpress/, but instead of adding image HTML to the label, it uses class and CSS which is cleaner. Or use Ubermenu as suggested https://community.theme.co/kb/integrated-plugins-ubermenu/

Thanks!

[wbgTHEMECO]

If I wanted to expand this to control other columns and sizes. Can I follow the same format that you provided (which worked well in the example I sent).

I can set the @media dimensions well enough, my question revolves primarily around the class for the columns and what their X theme widths are.

For example.

Columns size classes are: x-xs, x-sm, x-md, x-lg, x-xl.
Based on the columns shortcode options, the column splits are: 1-1, 1-2, 1-3, 2-3, 1-4, 3-4, 1-5, 2-5, 3-5, 4-5, 1-6, 5-6
The width should be percent based on their fractional space (the columns splits) minus a gutter of 4%.
For example:
If I wanted to change that 4 column layout to a 6 column layout, I would set the width for those 4 column to be 12.6%, correct?

@media (max-width:979px) and (min-width:480px){
.x-column.x-sm.mycol4-2.x-1-4 {
    float: left;
    width: 12.6%;
    margin-right: 4%;
}
}

[Christopher]

Hi there,

It won’t work, because the other two columns are located on a different row. You can adjust columns width within one row.

Thanks.

[Author]

Posts