Mobile issues

[applemint]

Hi,

1. The logo in mobile view is cropped. In Theme Options, Custom Logo Height for Mobile is set to 100, so that the logo would be well readable. However, this crops it. How can this be avoided?

2. The way that header background photo on home page shows up in portrait view on mobile has some issues. It first shows up distorted, it then re-calibrates and frames it in a way that’s not ideal for this image. I like to have it a little off-center, so that the person in the image shows more central of the frame. Landscape view on mobile is fine.

[applemint]

This reply has been marked as private.

[SeaTheme]

Hi,
1.Please paste the custom CSS code to “Appearance > Customize: Additional CSS”

@media (max-width: 767px){
.responsive-ux .navi-logo .logo-wrap,.responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1 {
    line-height: 100px;
    height: 100px;
 }
body.responsive-ux #header-main > .container-fluid { height: 100px;}
}

2. Please paste the custom CSS code to “Appearance > Customize: Additional CSS”

@media (max-width: 768px) and (orientation: portrait) {
.fullwidth-wrap:not(.fullwidth-half) .back-background-img { 
    left: 72%;
 }
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[applemint]

Thank you!

1. I added another 5px to height (in both places) and not to line-height, as it was still cropping a little on the bottom.

@media (max-width: 767px){
.responsive-ux .navi-logo .logo-wrap,.responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1 {
    line-height: 100px;
    height: 105px;
 }
body.responsive-ux #header-main > .container-fluid { height: 105px;}
}

2. it is looking better than before, no more distortion (maybe because I removed password to view site?). But changing percentage doesn’t seem to change center of background header image.

[SeaTheme]

Hi,

1. I checked again and didn’t find the cropping. You could add padding for the logo image file, re-upload the new logo.

2. Please update the CSS:

@media (max-width: 768px) and (orientation: portrait) {
  .ux-mobile .back-background-img-mobile{background-position: 40% 50%;}
}

you could adjust the 40%

Regards

[applemint]

1. Indeed it is no longer cropping since I added the 5px as mentioned in my previous message. Though adding padding to the logo, would also be an elegant way to fix it.

2. Thank you for the updated code. This works and looks splendid. Thank you!

[Author]

Posts