Support » Theme: Storefront » Is there a better way of doing this?

  • Hi,

    Is there a better way of doing the below?

    The Allsops logo is above the header and the welcome content.

    I edited the header.php file and put the following:

    <div align="center" class="allsops-logo">
    					<img src="http://localhost/img/Allsops_Logo.png"/>
    					</div>	

    That’s in between the content and the header.

    Here is the CSS I used:

    .site-header{
    position: relative;
    z-index: 1;
    }
    
    .site-content{
    position: relative;
    z-index: 0;
    margin-top: -55px;
    }
    
    .allsops-logo{
    position: relative;
    z-index: 1;
    height: 104px;
    width: 500px;
    margin: auto;
    margin-top: -55px;
    }
    
    #post-24{
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    } 
    
    @media (min-width:768px) { .allsops-logo { height: 500px; width: 104px } }
    @media (max-width:66.4989378333em) { .allsops-logo { height: 60%; width: 60%; margin-top: -30px; } }
    @media (max-width:568px) { .allsops-logo { height: 60%; width: 60%; margin-top: -25px; } }

    I’m also struggling to get this to be responsive to other devices. It won’t resize to how I want it.

    Any advice to improve this?

    The margin-top: -55px; seems to be a bit of a pain when on devices as it shows a white gap sometimes where the value should be different for different screens.

    Many Thanks,
    Danny

Viewing 2 replies - 1 through 2 (of 2 total)
  • Anyone?

    How did you end up going with this, I’ll give you a hand to try and set this up for you. It’s probably just a matter of lining up the media queries with what you expect to see.

    How are you testing?

    I don’t want to teach you to suck eggs, but do you know how to use the dev tools in chrome and view the page in different resolutions so that you can tweak the media queries?

    • This reply was modified 2 years, 1 month ago by  madivad.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Is there a better way of doing this?’ is closed to new replies.