Full Width site and CSS problem with V5

[jsternfe]

I have 3 websites using Weaver Xtreme in Full Width mode, and in the past, under Custom CSS Rules, I have used:

@media screen and (min-width: 768px) {
#wrapper {
width: 80%;
}
}

to show some background on desktop screens.  Upgrading to V5 makes this not work, the main content area is full width.  Can you suggest the correct CSS for the new version please?  Thanks in advance!

-Jon

 

[GR8FL]

I have same issue. Below is my CSS. Reverting back until I can get a fix.

Thanks you.

 

@media screen and (min-width:768px){ul.wvrx-menu {margin-left:0;}
.wvrx-menu-right {margin-right:0;}
img.wvr-btn-6 {padding-right:15px !important;}
#footer-widget-area {padding:8px 0 0 0px;}
#footer-widget-area .widget-4 {padding-right:0px;}}

[scrambler]

We need a link to the site with your rule in place so we can see what is going on

[jsternfe]

Take a look at http://unyhs.org I restored from a backup so this is how it was, and how I want it to look.  After loading v5 the content area went edge to edge.

[scrambler]

Unless I can see the site on v5, there is no way to see the issue.

I will try your rule on a test site

 

[scrambler]

You rule still works on my test site with v5.

How is your site set to full width exactly?

Can you install V5 and post back?

[scrambler]

@jsternfe

I found that is you use align full your rule indeed does not work.

In your case, I would say instead of using your rule use the Left/Right Padding % option, and set that to 10%

@GR8FL we will need to see the site under v5

[GR8FL]

@Scrambler,

I will update our staging site with the theme and take it off of maintenance for you to see.

I saw this message when I opened the WP Admin: INFORMATION: The settings you are using are from Weaver Xtreme V4. They have been automatically converted to V5 equivalents. It is possible that you will find some small differences in how your site looks. You should also save these converted settings from the settings interface.

Here is the URL: https://sdi-staging.sussexaa.org/

You can compare it to our live site to see the difference which doesn’t have version 5 installed.

https://sussexaa.org/

 

 

[scrambler]

You just need to go to the header image setting, and set the header image to align: alignfull

Then go to the menu setting, and in the class box, type wvrx-fullwidth

@weaver, I noticed that you forgot to add the align option “Extend BG to full width” in the menu align option

[GR8FL]

You just need to go to the header image setting, and set the header image to align: alignfull

Then go to the menu setting, and in the class box, type wvrx-fullwidth

@Scrambler, I did the above and now the menu bar is not full width.

[scrambler]

Are you sure that Appearance > Xtreme Admin > Main options > Menus > primary Menu Bar > Add Classes Box has

wvrx-fullwidth 

in it?

 

[GR8FL]

That took care of it @Scrambler. Thank you.

What was done in this update that caused these issues? I have 3 other sites and am wondering if the same needs to be done.

 

[jsternfe]

Hi @Scrambler,

The padding % got us closer but still not perfect.  The header, menu and text shrunk, the background container (not sure what to call it) did not.  I have left v5 on for now for you to take a look.  I took screen shots too but can’t figure out how to post them here.

-Thanks,

Jon

 

[scrambler]

@jsternfe my bad I did not realize the background was on the wrapper.

Do the following instead.

• Remove the 10% L/R padding on the wrapper
• In the wrapper align option select center instead of alignfull
• in the Wrapper “Theme Width” box type 10000 (Site wide spacing in the customizer)
• Add your old 80% rule back.

@GR8FL

You can check the Release notes for all the detail, but the old legacy full width options were removed and incorporated in the align area option, and some changes were made to the wrapper width and centering.

[jsternfe]

@scrambler, that looks much better but still not quite right.  On my 1920×1080 monitor, the content area is now much narrower than it was.  I think it’s forcing 1000px wide instead of 80% of the screen width?

 

[scrambler]

You used 1,000, I told you to use 10,000 🙂

[Author]

Posts