Announcement

Collapse
No announcement yet.

Need to add content to global header w/o breaking the layout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Need to add content to global header w/o breaking the layout

    It seems to me that Iron & Wool images don't become responsive until the view port has shrunk to a certain size (768px?).

    But I need to make global header images responsive at larger sizes, or at least I'm thinking that will help.

    We have added certain global header images and as a result -- as the viewport shrinks but before the mobile navigation/header kicks in -- the layout is breaking.

    This is the site: http://www.avinylfence.com/

    The global header layout is fine until the viewport gets about 1135px wide and then begins to break up, undoubtedly the result of the additional elements (the BBB logo and large 800 number) that have been added, which required some rearranging of the default layout.

    I'm looking for a solution that let's me keep the BBB logo and the 800 phone number in the larger widths without messing up my layout and I'm thinking if the images were responsive at those widths it would help. There are other solutions I'm sure.

    Any ideas??
    Guy Turck
    The Glass Baby Bottle - Toxin Free Essentials for Babies & Toddlers

    #2
    You will need to play with the column widths in the 'main-header' element. I would start by adding a medium breakpoint, say medium-whole, and update the existing 'medium-' ones to 'large-' and the 'large-' to 'x-large-'. Probably remove the padding you have added for the phone number as well.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment

    Working...
    X