Anonymous
Hi, in my homepage I have a slider and to make it as wide as the page width, I used this CSS
hidden link
.boxed-page .vc_row:first-child.width-full {
padding-top: 0;
}
.vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full {
max-width: 100%!important;
padding-left: 0;
padding-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0!important;
right: 0!important;
}
.slider-homepage {
margin-top: -32px !important;
}
.vc_desktop.vc_transform h1.title {
max-width: 1120px;
}
The problem is that is goes in conflict with some pages with views such as this
hidden link
hidden link
and not with others like this
hidden link
Dear Simone,
Please elaborate more details for the question, which plugin/theme conduct the conflict with your custom CSS codes?
And there are lots of differences between those pages you mentioned above, please point out where should I check and how can I see the CSS conflict.
Anonymous
So, the code was written to let the slider in homepage be full-width, not respecting the margins as the whole content of the page.
So, homepage screenshot (1) is correct.
Also other pages, such as a post, has the correct margin (2).
Instead, in pages in with I put a custom View (a template or a custom search), the margin is not respected and I don't know why. (3) (4)
It is a custom CSS codes problem, in your case you will need to wrap the view int a HTML DIV tag, with specific CSS class names "vc_row", for example:
<div class="vc_row wpb_row vc_row-fluid">
[wpv-view name="my-view" ....]
</div>
See screenshot scoutsandamiano.JPG
Anonymous
There is something not clear to me:
1) I have 3 pages, each one with 1 View, written in the same way
<p>[wpv-view name="ricerca-documenti"]</p>
hidden link
<p>[wpv-view name="ricerca-verbali"]</p>
hidden link
<p>[wpv-view name="ricerca-libri"]</p>
hidden link
But only the last one (hidden link ) has the problem I shown.
So, why did you tell me to add a div in all the pages with a search view, if two pages up to three are shown correctly even without it?
Can I give you credentials so you can see on your own if it is a problem of that specific View?
Ps
I have the problem also in 2 templates of custom types
hidden link
hidden link
hidden link
hidden link
OK, As your request, I have enabled the "private detail box", please provide the credentials of your website. thanks
Thanks for the details, I am checking it in your website, will feedback if there is anything found
It is a problem of you custom CSS codes, in the URL:
hidden link
It is using CSS style of file:
hidden link
line 32:
.vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full {
max-width: 100%!important;
...
But other pages don't use this CSS style.
You can remove this line and test again:
max-width: 100%!important;
Anonymous
I told you about it in my first post.
I wrote this code (in my intentions) with the only purpose to make it work in the homepage, to have the photo slideshow to be full width.
I wrote the code into a plugin that let me write custom css.
I try adding .home or .page-id-19 before that code, but with this add the slider is no more full width in homepage
.home .vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full {
max-width: 100%!important;
...
}
or
.page-id-19 .vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full {
max-width: 100%!important;
...
}
How can I make it work only for the homepage so?
you can try this:
body.page-id-19 .wrapper{
/* here add your custom CSS codes*/
}
It will take effect on the page-id-19 only.
Anonymous
Hi, I replaced this previous code
.vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full {
max-width: 100%!important;
padding-left: 0;
padding-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0!important;
right: 0!important;
}
with the one you told me
body.page-id-19 .wrapper {
max-width: 100%!important;
padding-left: 0;
padding-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0!important;
right: 0!important;
}
But the homepage lose the full-width slider
I then tried this code
body.page-id-19 .vc_desktop.vc_transform .boxed-page .body-wrapper .wrapper, .boxed-page .vc_row.width-full{
max-width: 100%!important;
padding-left: 0;
padding-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0!important;
right: 0!important;
}
and neither this one worked.
So, I really need you to solve the problem, so that I can:
1) have the full width slider in homepage (obtained with the first code of this post
2) not having Toolset Custom Search Views randomly fullwidth
Thanks
I tried the FTP access you provided above, I can see only empty folder, so I can not edit that CSS file in your website, you can try this CSS codes:
.vc_desktop.vc_transform .boxed-page.page-id-19 .body-wrapper .wrapper, .boxed-page.page-id-19 .vc_row.width-full {
max-width: 100%!important;
padding-left: 0;
padding-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0!important;
right: 0!important;
}
If you still assistance for it, please check the FTP access you provide, make sure it is valid:
https://toolset.com/forums/topic/css-conflict/#post-602432
Anonymous
You are an angel! Many thanks