[Resolved] CSS conflict

[Author]

Posts

[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

[Luo Yang]

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)

[Luo Yang]

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

[Luo Yang]

OK, As your request, I have enabled the "private detail box", please provide the credentials of your website. thanks

[Luo Yang]

Thanks for the details, I am checking it in your website, will feedback if there is anything found

[Luo Yang]

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?

[Luo Yang]

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

[Luo Yang]

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

[Luo Yang]

You are welcome