Hi Tagdiv, hope you’re well.
I’m quite worried. My homepage is very messed up.
I have several post grid (from VC) with 2-3 columns.
Yesterday I changed the font of one element of the grid, and then boom, all the grids on my homepage are one under another.
I checked everywhere and found that there is a code generated by js_composer.min.css that includes this :
.vc_grid.vc_row .vc_grid-item {
padding: 0;
vertical-align: top;
/* float: none; */
box-sizing: border-box;
z-index: 1;
}
You see the “float:none;”?
Because of this, all the blocks are this way. So because this website is way popular, I went on the file and deactivated it (that’s why there is the /* */ stuff).
But I know that’s just some little temporary patch.
Can you please help me on this? I can’t find why this happens.
Here is the website : https://fashioniseverywhere.com/
Check on the 2nd section (with 3 columns/3 articles), check the CSS code on the div with classes “vc_grid-item vc_clearfix vc_col-sm-6 vc_visible-item fadeIn animated”, you’ll see.
I can also give you some admin credentials.
Thanks thanks thanks!
Hi,
Those grid items have the float left property set on them
– https://www.screencast.com/t/QUkXWM9Pad
After inspecting the page it seems that the font size for the excerpts is causing this issue
– https://www.screencast.com/t/FyrdBquCMTp
– https://www.screencast.com/t/OmT39C4o
Maybe you could check all your custom code and identify why exactly is the font size modification breaking the layout.
Thanks
Hi Simion!
Thanks for your reply and help.
I think I didn’t explain properly, I try again.
Yes thos grid items have the float left property set because I edited the js_composer file.
Check that, now i put it right like it was before : https://i.imgur.com/veMkXoX.png
See the float:none?
It overwrites the float:left property.
So to “fix it” I edited js_composer.min.css and put /* float:none; */ on it.
But we all know that this won’t fix it forever.
I don’t find any relation between the font and this float property.
Can you help me on this plz? Thanks
Hi,
This is unusual. The code mentioned is present in my Visual composer style, and I did not add it in that file
– https://www.screencast.com/t/edjGB2lBgnP
Maybe it is not applying for some reason in your case. But if it works at the moment, you could just leave it as it is. The structure you have created seems to be complex, I could not say why this is happening. You can go over the page in Visual composer and also check your custom code set on the elements , maybe you can identify the problem.
Thanks
I found a piece of the solution!
This happens because of 2 reasons :
.vc_grid.vc_row.vc_grid-gutter-30px {
margin-right: -30px;
}
(which I don’t know why this is happening)
So I added on custom CSS :
.vc_grid.vc_row.vc_grid-gutter-30px {
margin-right: 0!important;
}
AND
the <p></p> that is adding itself after each block.
I don’t know how to remove them. Do you know how?
Thanks
I managed to fix it with some bad CSS.
.vc_pageable-slide-wrapper p {
margin: 0;
clear: both!important;
display: none;
}
.vc_grid-item p {
display: block!important;
}
This is a temporary fix for me. If you know how to remove those <p> please tell me, thanks.
Hi,
I cannot say how you would remove those tags. There must be a reason Visual composer ads them there. But when there is need of so many Css fixes, something may not be working properly. Once you start using codes to fix one thing, this could affect another and so on.
If you managed to achieve a stable result, just leave it as it is.
Thanks
