How Do I Make Theme Extend Width of Browser?

[GR8FL]

I don’t want the “box” look anymore. Would like theme to extend to width of browser (regardless of browser size) with maybe 10px of padding on both sides. It needs to scale down according to device and monitor width.

When I have done the steps outlined in section B: http://forum-archive.weavertheme.com/discussion/11124/full-width-designs, I get header (which I set to full width) too high and distorted.

http://xtreme.littledropup.com/

[scrambler]

You are using the special technique for the header image, based on a header image the width of the site (960px) and a background image to create an extension behind it.

This no longer works if your site width is set at 9999px, as the header image will expand to fill that width and therefore become higher

If you still want the effect, you need to constrain the header image to the previous width by adding the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

#branding #header-image img {max-width:960px;}

[GR8FL]

That fixes it!

But now the columns on the home page are messed up.

I am using <div class=”content-3-col”>
Each column has a Link, followed by an image, followed by text. The text is creeping into the right side of the image even though I gave it a paragraph break. For example,

<div class=”content-3-col”><p><strong><a title=”HLFM” href=”http://www.historiclewesfarmersmarket.com/&#8221; target=”_blank”>Farmer’s Market (HLFM)</a></strong></p>
<p><a href=”http://www.historiclewesfarmersmarket.com/&#8221; target=”_blank”><img class=”alignleft size-full wp-image-211″ alt=”Historic Lewes Farmers Market” src=”http://xtreme.littledropup.com/wp-content/uploads/HLFM-175.jpg&#8221; width=”200″ height=”200″ /></a></p>
<p>May through November, Hattie’s Garden can be found at the <a href=”http://www.historiclewesfarmersmarket.org/&#8221; target=”_blank”>Historic Lewes Farmers Market</a> (HLFM) selling vegetables and lovely flower arrangements. The market runs from 8 to 12 through Sep., 9 to 12 in Oct. & Nov.</p></div>

If I align the image center, then it is fine, but I want it aligned left.

[scrambler]

They are not messed up, but the text is set to wrap around the image, so if there is space it uses it 🙂

You can force the text to clear the image. If as it looks like you are the one creating the column content, switch your editor to text mode and add a clearing style to the first paragraph of text after the image.

<p style=”clear:both;”>text</p>

Alternatively, you can remove the float on the image tag so the text does not wrap

<img style=”float:none;”…../>

[GR8FL]

I fixed that & it looks much better.

But now back to the topic. Not so sure this really looks that great. I just looked at this site on my phone and I find the header is not right. Compare with real site using 960px for theme width: http://hattiesgarden.com/

Real Site:

[scrambler]

Your screen capture dont show, but the problem I see comes from the right and left padding you added on the wrapper.

You need to remove that and add padding in the sub containers where you need it

[GR8FL]

I need to work on this some.

Thanks for the heads up & help.

[GR8FL]

Right now the whole thing is huge and I am not sure whether I need to center the container area or leave it left aligned.

I also do not like the border showing up on the sidebar on the phone since it’s supposed to be left (on a desktop), but in mobile, the sidebar is under the container.

Also the image under the menu bar (located in the Container Top area) is not sizing properly with this new width.

Not sure what is even gained by this. It might make more sense to have the wrapper color same color as container and call it a day.

[scrambler]

You choose method C which is full content width, this indeed makes the content very large.

You can always use the method that only extends the background color, or you can restrict some of the content area with either max-width options or custom CSS

The left border on the sidebar would esily be removed om mobile with custom CSS

“Also the image under the menu bar (located in the Container Top area) is not sizing properly with this new width”

It looks fine to me, so you would need to elaborate

[GR8FL]

I have much to experiment with.

May be picking your brain in the very near future.

Thank you, Scrambler. 🙂

BTW, It’s the image in the pre-container that is smaller on the phone view when sized using option C. Desktop makes no difference.

[GR8FL]

I am back!

Been experimenting with changing the theme width without making this so huge.

I have played around a bit with left / right padding for the container (instead of at the wrapper), and whether it should be aligned left or center. Right now I have 20px on left and right side.

Questions:

1. How do I get rid of the left border on the sidebar when mobile?
2. How do I align menu bar items so it is flush left and right respectively? In other words, I want the Home text on the left side of the menu bar to be aligned left with the border of the container & the Email Icon to be aligned right to the border.
3. Now I have this set at 1100 px for theme width. Do I still need to use
   #branding #header-image img {max-width:960px;}?? Or do I need to change
   my header so it is sized properly for 1100 px? It does seem okay on
   desktop and phone as it is right now.

[scrambler]

1-

.is-mobile #primary-widget-area {border:none;}

2-

@media screen and (max-width:767px){
ul.wvrx-menu {margin-left:0;}
.menu-primary .wvrx-menu-container li:nth-of-type(1) a {padding-left:0;}
.wvrx-menu-right {margin-right:0;}
.weaver-buttons a:last-of-type img {padding-right:0 !important;}
}

3-

The width needs to match the size of the image, So if your site is set for 1100px, either the image needs to be 1100px, or if you use the 960px, you need the max-width rule to keep it at 960px like it is now

[GR8FL]

The 2nd answer has no effect. What am I doing wrong? I even put it back to 960 and took out the container padding, but the menu bar items do not align flush left or right. Same thing with footer items.

[scrambler]

Sorry, brain freeze. The rule is

@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:0;}
.wvrx-menu-right {margin-right:0;}
.weaver-buttons a:last-of-type img {padding-right:0 !important;}
}

[GR8FL]

I am glad I am not the only one who has brain freezes every now and then 🙂

That worked! And thank you.

Now how can I do the same for the footer?

[scrambler]

Change the previous rules to include the footer ones and modify the button one

@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:0;}
.wvrx-menu-right {margin-right:0;}
img.wvr-btn-3, img.wvr-btn-6 {padding-right:0 !important;}

#footer-widget-area {padding:8px 0;}
#footer-widget-area .widget-4 {padding-right:0px;}
}

[Author]

Posts