How Do I Make Theme Extend Width of Browser?

[GR8FL]

This works!

Would love it if you could break down for me what the solution means.

What is max-width:768px? And why 768 and not 767? What does nth-of-type(1) mean?

[scrambler]

@media rule is to only do these changes on desktop as the layout is different on mobile. (min-width:768px) means the rule only applies to screen that are above 768px (desktop) 768px is the threshold used by the theme for desktop rules the 3 device size are

0-580px  phones

581-767px small tablets

768- max Desktop

ul.wvrx-menu {margin-left:0;}                 /*this removes the left margin on the list of menu items*/

.menu-primary .wvrx-menu-container li:nth-of-type(1) a {padding-left:0;} 

 /*This remove the individual left padding on the first menu item.
.menu-primary .wvrx-menu-container li a  are the four selectors used in the original padding rule that you see if you inspect the page
Inside the .wvrx-menu-container  are several li elements (one for each menu items), given I only want to change the first one, I select the first one by adding :nth-of-type(1) to the li selector (the first of its type in the container)*/

.wvrx-menu-right {margin-right:0;}       /*this removes the right margin on the add HTML container*/

img.wvr-btn-3, img.wvr-btn-6 {padding-right:0 !important;}   /*this removes the right padding on the image of the last buttons*/

#footer-widget-area {padding:8px 0;}                                   /*this removes the right and left padding on the footer widget area*/
#footer-widget-area .widget-4 {padding-right:0px;}              /*This removes the right padding on the 4th widget in the footer widget area*/

All the selectors are found inspecting the page with the browser developer tool and check which rules contain paddings or margin that need to be removed.

[GR8FL]

Thanks for the explanation.

I am back to using Firefox now. What tools do you recommend to check all this? I do have Web Developer: http://chrispederick.com/work/web-developer/, but am wondering if something else is better.

[Gillian]

Have you tried the Firefox extension “Firebug”?

[scrambler]

Yes in Firefox, the standard tool is Firebug

[GR8FL]

Thanks!

Now off to learn this tool.

[scrambler]

If you have not done so yet, also read this thread

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[GR8FL]

On my tablet the left and right menu bar icons are almost cut off… need a pixel or two for breathing room. How can I fix this?

I have a screen shot, but having trouble posting it here.

Update: I added 15 px to the rule you gave me to match the 15 px padding I added to the container. Does this make any sense or do I even need the rule anymore?

@media screen and (min-width:768px){
ul.wvrx-menu {margin-left:0;}
.menu-primary .wvrx-menu-container li:nth-of-type(1) a {padding-left:15px;}
.wvrx-menu-right {margin-right:0;}
img.wvr-btn-3, img.wvr-btn-6 {padding-right:15px !important;}
#footer-widget-area {padding:8px 0 0 15px;}
#footer-widget-area .widget-4 {padding-right:15px;}
}

[scrambler]

If you decide to have these item aligned exactly to the left and right of the wrapper, this is what you get.

If you dont, then instead of setting all the values to zero, set them to something else (in yellow below)

@media screen and (min-width:768px){
ul.wvrx-menu {margin-left:5px;}
.menu-primary .wvrx-menu-container li:nth-of-type(1) a {padding-left:0;}
.wvrx-menu-right {margin-right:5px;}
img.wvr-btn-3, img.wvr-btn-6 {padding-right:0 !important;}
#footer-widget-area {padding:8px 5px;}
#footer-widget-area .widget-4 {padding-right:0px;}
}

[GR8FL]

I think we both answered the question at the same time, and you confirmed what I just added in during my update to the question, except you did margins and I did padding. I guess I could just eliminate the rule. What do you think?

BTW – trying to figure this out with Firebug is going to take some time, but I appreciate the point in the “right” direction.

Thank you so much!

[Author]

Posts