Twentyfourteen custom header for different screen sizes (2 posts)

  1. KBaucherel
    Posted 2 years ago #

    I am using a TwentyFourteen CHILD THEME

    I have a custom header above the top navigation bar consisting of a left-floated logo, right floated cluster of social media and relevant link icons, and centred text. Looks lovely on PC Chrome/ Firefox / IE and on my handy Android tablet (Chrome) but lousy on larger iPad screen and on iPhone, where the center text scrunches up and lengthens.

    I'm a CSS novice so some help would be appreciated to fix those views!

    Site is http://www.galiatest.co.uk/sfof and the custom css is as follows:

    #headline { background-color: #FFF8F0; width: 100%; display: inline-block; }
    #logo { width: 250px; height: 200px; float: left;
    padding-top: 30px; padding-bottom: 30px;
    margin-left: 40px; margin-right: 50px;}
    #contact { width: 220px; float: right; padding-top: 30px; margin-right: 40px; margin-left: 50px; }
    #dates { text-align: center; overflow: hidden;}

  2. KBaucherel
    Posted 2 years ago #

    Update... after much browsing I have tried replacing absolute widths with % values, which still looks perfect (in fact, slightly better) on sensible devices but delivers a right margin on iPad and a mess on iPhone.

    #headline { background-color: #FFF8F0; width: 100%; display: inline-block; }
    #logo { width: 25%; float: left; padding-top: 30px; }
    #contact { width: 25%; float: right; padding-top: 30px; }
    #dates { text-align: center; overflow: hidden;}

Topic Closed

This topic has been closed to new replies.

About this Topic