Remove padding below logo in mobile view

  • persy

    (@persy)


    9 years ago

    Hi,
    I’m using the Sketch theme for my blog:

    persephone-coelho.com

    and I’ve followed the advice in this thread to make my logo larger and to remove the padding below the logo. This works fine when I view it on a desktop, however when I view it on a narrow screen (or mobile) the logo appears higher up, ie with more padding between the logo and the grey bar below. As the screen gets narrower, the logo moves higher and higher until it is completely misaligned with my menu.

    I have seen another site using the sketch theme where they have got round this issue and the logo remains at the same distance from the grey bar below it, even on a narrower screen.

    Please could you advise how I can fix this?

    ps. I have set up a child theme with a style sheet and a functions.php file in case that’s of use.

    Many thanks!
    Persephone

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    You can try wrapping some or all of your child theme’s CSS logo modifications in a media query to restrict them to larger screens. You can learn more about using media queries that target certain screen sizes here:

    https://en.support.wordpress.com/custom-design/custom-css-media-queries/
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    You’ll need to experiment until you get the effect you’re looking for.

    Thread Starter persy

    (@persy)

    Hi Kathryn, thanks for your reply. I will have a look at your suggestion and see if I can get it to work.

    I guess by changing the default logo size in my child theme, I’ve essentially ‘broken’ the responsive design that governs how the logo appears as the screen changes size. I wondered therefore, if it would be worth while looking at the CSS in the original Sketch theme to work out how they made the logo responsive and to see if I can copy that bit over to my child theme?

    I could be talking complete nonsense as I don’t really know much about this! Anyway, thank you for your help, I’ll definitely look into it.

    I wondered therefore, if it would be worth while looking at the CSS in the original Sketch theme to work out how they made the logo responsive and to see if I can copy that bit over to my child theme?

    Definitely worth doing. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove padding below logo in mobile view’ is closed to new replies.