How to Change (Hide 1 Column) on Header Widget

[williamweaver]

I have 4 columns setup, which looks good on desktop, and I’ve them stacking nicely on phones but for @media screen and (min-width: 571px) and (max-width: 955px) I need to hide one of the banners (3 columns).

This is the final piece of the puzzle, and I’m not sure what approach I should take to make this happen. Suggestions welcomed. 🙂

http://encounternewfoundland.com/

[scrambler]

Can you confirm if you are you using the Custom Widget width option in the header widget area, if so what values do you have in the three boxes desktop, smalltablet and phone.

Also if so, make sure there are no values in the column box.

Finally when you say for min 571 and max955 are these the actual values and if so what is conditioning them?

Because the theme threshold for desktop, small tablets and phone are

phones: 578px and below

small tablets: 576 to 768

desktop: 768 and above

[williamweaver]

Width is default (100%)
padding-left:15px
padding-right: 10px
Columns: 4
Desktop: 35,35,9,21;
Small Tablet: 35,35,14,16;

Viewing the site at http://quirktools.com/screenfly/ I’ve worked out that all sizes above and below (min-width: 571px) and (max-width: 955px)
are perfect, but for these sizes–if I want to have a crisp looking ad banner–it appears I’ll need to drop one of the two banners. Not wanting them to stack as it’s already a fairly top heavy site.

I’ve been giving it some more thought, and I think what I need is to display:none #header-widget-area for (min-width: 571px) and (max-width: 955px) and show
#header-widget-area-2, but I haven’t had a chance to test that theory yet. Am I on the right track?

[scrambler]

First you should change your settings the following way

remove the 4 in the column box

Add the values below in the Phone box (below small tablet)

phone:  100;100;100;100;

I don’t think you are on the right track :).

Although everything is possible, if you really wanted to change the Columns distribution for these width, it would be easier to redesign the columns from scratch using HTML and CSS.

I would start by explaining in details what issues you see in the interval of 571 to 955 as I suspect we can solve them without going in that direction.

[scrambler]

For example I would start by using something like

Desk: 34,34,10,19;
ST: 50,50;20,80;
PH: 100;100;100;100;

And clarify how you want the social icons and search to be aligned vertically (top, center, bottom), as right now there is some funky positioning being used.

[williamweaver]

I went ahead and ahead some more funky css…and it works. A bit of an issue with banner rez on a couple of weird sizes, but nothing to major that I can’t live with for the time being.

I’m out of time for this part of the project atm; however, now that I have a better grasp of how the header widget area comes to together/coupled with what you mentioned above, I think I can take it from 99% to 100% when I get a bit more time to do so.

Thanks for your help scrambler. I need to make a couple of $ before I can send off a donation in your name…coffers are running low atm.

[williamweaver]

Okay, I couldn’t sleep. lol

Made your changes on test site http://encounternewfoundland.com/testing2/

I ended up with
36,36,11,13;
50,50;20,80;
100;100;100;100;

Bottom align for Social and Search is desired.

@ 600-650px and 816-851px banner #2 goes fuzzy. Not sure why #1 looks good, and #2 goes fuzzy. Perhaps I need to give it more room, and/or remove the margin-right:1px

Okay, going to sleep whether I want to or not…

[scrambler]

As the browser gets smaller, images need to scale down so their quality may vary based on the browser you use and their rendering capabilities. Their is nothing you can do about that

[Author]

Posts