Home Forums Archived Forums Mobile View How to Change (Hide 1 Column) on Header Widget

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17990
    williamweaver
    Participant

    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/

    #23159
    scrambler
    Moderator

    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

    #23160
    williamweaver
    Participant

    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?

    #23161
    scrambler
    Moderator

    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.

    #23162
    scrambler
    Moderator

    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.

    #23163
    williamweaver
    Participant

    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.

    #23164
    williamweaver
    Participant

    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…

    #23165
    scrambler
    Moderator

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.