Padding logo on mobile view

  • shaunyf

    (@shaunyf)


    10 years, 11 months ago

    Hi there,

    Is there anyway of changing the padding in the header around a custom logo on the mobile view? The padding looks fine on desktop and iPad layouts, however when testing on IOS on the iPhone 6 the logo and padding takes up approximately 50% of the the screen.

    http://Www.replaysheffield.com

    Thanks,
    Shaun

Viewing 3 replies - 1 through 3 (of 3 total)
  • emranemranx

    (@emranemranx)

    10 years, 11 months ago

    Hi there,

    Thanks for writing in,

    I’ve checked the URL that you’ve provided and would you mind directing us a little more about how exactly the padding should be around the header logo on iPhone 6 screen size and please provide more clarification with snapshots if possible.

    Thanks.

    Thread Starter shaunyf

    (@shaunyf)

    10 years, 11 months ago

    Thanks for looking at this.

    The image on the link below illustrates the over padding issue.

    http://replaysheffield.com/iphone6/

    Thanks,
    Shaun

    emranemranx

    (@emranemranx)

    10 years, 11 months ago

    Hi there,

    In such case as you want to change the padding. After taking a closer look at your website which seems to be perfect but the same time you want pretty manual alterations so there is probably one way to resolve this as there are no paddings applied for the moment.

    You can change the width on logo a bit to eliminate the padding by an indirect way so it won’t cover the 50% of the screen.

    see: http://prntscr.com/71qtb7

    To achieve such as shown above you may need to go to the Appearance > Theme Options > Custom Css

    @media only screen and (max-width: 768px)
#logo-image {
  float: none!important;
  margin: 10px 0!important;
  display: inline-block;
  width: 240px;
}

    Hope this helps,

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Padding logo on mobile view’ is closed to new replies.