[Resolved] CSS conflict

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This thread is resolved. Here is a description of the problem and solution.

Problem:

in my homepage I have a slider and to make it as wide as the page width, I used this CSS

.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;
}

The problem is that is goes in conflict with some pages.

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.

Solution:

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 {
/* here setup your CSS codes*/
}

Relevant Documentation:

Tagged: 

This topic contains 13 replies, has 2 voices, and was last updated by  Luo Yang 2 weeks, 4 days ago. The support staff assigned to this topic is Luo Yang.

Viewing 14 posts - 1 through 14 (of 14 total)
Author
Posts
#601757

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

#601884

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#601941

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)

#602101

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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

#602140

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

#602396

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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

#602482

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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

#602493

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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;

#602540

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?

#602839

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#602902

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

#602936

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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://wp-types.com/forums/topic/css-conflict/#post-602432

#602940

You are an angel! Many thanks

#603247

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

You are welcome

Viewing 14 posts - 1 through 14 (of 14 total)