The issue is not visible from my end. Tried in various screen resolution but not able to replicate. Could it be a cache issue. Try checking in browser incognito mode.
Thanks but it need to to be masonry material like it is now. There is no way to add some right padding or margin, or decrease a space between the items? It looks like 15px too wide on the right.
Hi, could please check why the blog items extend on right side the site content?
Right side of the menu is much to the left than a right edge of the blog items.
Please see attached.
Hi Marcin,
The issue is not visible from my end. Tried in various screen resolution but not able to replicate. Could it be a cache issue. Try checking in browser incognito mode.
Thanks.
Hi Andrew
1.Thanks, but I removed menu right margin so it should be aligned at 0.
2. Also cant find the right css to move title/category on blog in mobile from the left side a bit.
Please see attached.
Hi Marcin,
The following will add padding left:
@media only screen and (max-width: 768px){ .masonry.material .masonry-blog-item .article-content-wrap, .masonry.material .masonry-blog-item .meta-category, .related-posts[data-style="material"] .meta-category { padding-left: 15px !important; } }Thanks.
Thank you, I have tried this but will no luck
http://nowy.avantmodels.de
I have this in my css panel, maybe some conflict?
.masonry.material .masonry-blog-item .article-content-wrap,
.masonry.material .masonry-blog-item .meta-category,
.related-posts[data-style="material"] .meta-category {
padding: 5px 0 0 0!important;
}
Hi Marcin,
That is causing it. It looks okay when commented off.
Thanks.
And is there an option to have 0 padding on desktop and 30px on mobile?
Hi Marcin,
Use the css media queries to apply css on different screen sizes. The first is for desktop while the other is for mobile.
/* Desktop */ @media only screen and (max-width: 768px){ .masonry.material .masonry-blog-item .article-content-wrap, .masonry.material .masonry-blog-item .meta-category, .related-posts[data-style="material"] .meta-category { padding-left: 0 !important; } } /* Mobile */ @media only screen and (max-width: 768px){ .masonry.material .masonry-blog-item .article-content-wrap, .masonry.material .masonry-blog-item .meta-category, .related-posts[data-style="material"] .meta-category { padding-left: 15px !important; } }Kind regards.
Perfect, thank you Andrew!
and what can I do with this blog items expanding outside the container?
Portfolio items are ok.
Hi Marcin,
That material layout style is supposed to have that design. Try classic enhanced style
Thanks.
Hi Andrew,
Thanks but it need to to be masonry material like it is now. There is no way to add some right padding or margin, or decrease a space between the items? It looks like 15px too wide on the right.
Hi Marcin,
Try the following css:
.page-id-5 .container-wrap .vc_row-fluid[data-column-margin="none"] > .span_12, body .container-wrap .vc_row-fluid[data-column-margin="none"] .full-page-inner > .container > .span_12, body .container-wrap .vc_row-fluid[data-column-margin="none"] .full-page-inner > .span_12 { margin-left: -9px !important; }Kind regards.
Thank you, it help a bit. Hope that Client will accept it.
Why this doesn't work on the clone site?
http://nowy.avantmodels.de
Hi Marcin,
It seems the contents are not going outside container. Confirm if you have the same custom css in Salient > General settings > CSS/Script related.
Thanks.
Hi Marcin,
Sorry for late response.
Everything seems to be working properly on both. Likely it was a caching issue as the two site looks identical now..
Thanks.
Hi,
I have found the reason, the column margin was set differently. Now is all good, thank you!