Docs

[markusp80]

Hi!

I created this page before the big update and switch to Cornerstone, so it’s built in Visual Composer, which I like very much to work with. I have had a rather long hold up so the last time I worked on this site was before summer.

But now as I have started to work on it again I have noticed small things that does not work as before. It’s heading sizes, alignment, behaviour of columns etc.

The enclosed image vc.png is a screenshot of how the page was built in Visual Composer, and this worked great. As you can see, I want the right column to be 1/3 of the width. This doesn’t work anymore since the right column is placed underneath the left column in desktop visibility.

How can I fix this? It seems like the template doesn’t work like it used to. I have saved the pages, I tried to change the number of columns and changed back to 2/3 + 1/3 but it did not work.

[markusp80]

This is how the page looks in vc.

[markusp80]

And this is how the page looks in the browser. The blue box with rounded corners is supposed to be placed to the right, and it was, but now it’s hopped down without having made any changes. It’s exactly the same on all the other product pages as well.

The URL: http://truckcam.com.preview.binero.se/

[Zeshan]

Hi Mark,

Thanks for writing in!

I’ve checked your site and it seems there’s some custom CSS code that’s causing this conflict (see: http://prntscr.com/98p8qa). In order to resolve the issue, you’ll need to remove following CSS code from Custom > CSS in the Customizer:

#x-content-band-3 .x-column {
    float: none;	   
    display: inline-block;
}

#x-content-band-3 .x-container {
    text-align: center;
}

#x-content-band-7 .x-column {
    float: none;	   
    display: inline-block;
}

#x-content-band-7 .x-container {
    text-align: center;
}

@media only screen and (min-width: 768px) {
#x-content-band-3 .x-column.x-sm.x-1-6:first-child {
margin-left: 0;
}

#x-content-band-3 .x-column.x-sm.x-1-6 {
width: 16%;
margin-left: 4%;
margin-right: 0;
float: none;
display:inline-block; 
}
#x-content-band-3 .x-container {
text-align: center;
}
}

@media only screen and (min-width: 768px) {
#x-content-band-7 .x-column.x-sm.x-1-6:first-child {
margin-left: 0;
}

#x-content-band-7 .x-column.x-sm.x-1-6 {
width: 16%;
margin-left: 4%;
margin-right: 0;
float: none;
display:inline-block; 
}
#x-content-band-3 .x-container {
text-align: center;
}
}

I’m not sure for what page you’ve added it, but it’s being applied on other pages too. If the CSS was for the homepage only, you can replace it with following CSS code that’ll limit it to the homepage only:

.home .home #x-content-band-3 .x-column {
    float: none;     
    display: inline-block;
}

.home #x-content-band-3 .x-container {
    text-align: center;
}

.home #x-content-band-7 .x-column {
    float: none;     
    display: inline-block;
}

.home #x-content-band-7 .x-container {
    text-align: center;
}

@media only screen and (min-width: 768px) {
.home #x-content-band-3 .x-column.x-sm.x-1-6:first-child {
margin-left: 0;
}

.home #x-content-band-3 .x-column.x-sm.x-1-6 {
width: 16%;
margin-left: 4%;
margin-right: 0;
float: none;
display:inline-block; 
}
.home #x-content-band-3 .x-container {
text-align: center;
}
}

@media only screen and (min-width: 768px) {
.home #x-content-band-7 .x-column.x-sm.x-1-6:first-child {
margin-left: 0;
}

.home #x-content-band-7 .x-column.x-sm.x-1-6 {
width: 16%;
margin-left: 4%;
margin-right: 0;
float: none;
display:inline-block; 
}
.home #x-content-band-3 .x-container {
text-align: center;
}
}

Hope this helps. 🙂

Thank you!

[markusp80]

That did the trick, thank you very much! 🙂

[Prasant Rai]

You are most welcome 🙂 .

[Author]

Posts