Mobile version not showing properly

Hello,

I have noticed that the logo won’t upload on the mobile version of the website, neither the complete picture of home page:

Any ideas why?

Regards

Hello there,

For some reason, the logo image won’t load on mobile browser. Try adding the below custom CSS code to load the image as a background instead of an image element.


@media only screen and (max-width:1024px) {
  
  .site-header .col-md-4 a{
    display: inline-block;
    width: 224px;
    height: 40px;
    background-image: url('http://www.pushingborders.com/wp-content/uploads/2016/12/SERGIO_TIPOGRAFÍA_LOGO2.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
  }
 
  .site-header .col-md-4 a img{
    opacity: 0;
  }  

}

Let me know how it goes.

Regards,
Kharis

Hi there,
I am having a similar issue on my site. I have Sydney Pro and if you visit sugarcountry.flywheelsites.com on an iPhone 7 or 7+ and iPad, you’ll see that it’s just a grey box not the photo.
I have it set up using a row with a background image.
Would appreciate any help in resolving this.
Thanks so much,
Hamish

Hello Hamish,

Your problem is actually different with Sergios’. To fix the background image visibility issue on mobile devices, try adding the below CSS code:



@media only screen and (max-width:1024px) {
  
 .panel-row-style[data-hasbg="hasbg"] { 
     background-attachment: scroll;
  } 
  
}

Let me know how it goes.

Regards,
Kharis

Hi - thanks so much for the fast response. Unfortunately this didn’t work.
Can you confirm am meant to copy and past:

@media only screen and (max-width:1024px) {

.panel-row-style[data-hasbg="hasbg"] {
background-attachment: scroll;
}

}

into the child theme’s CSS?
If so, this didn’t work.

That row is also rendering with no image but header and address bar covering top third of row - ignoring mobile padding in portrait mode on iPad.

Regards
Hamish

Hi Kharis,
My apologies - I was using the text out of the email notification which made the " show up as ".
The image now shows up on iPhone (landscape and portrait) and iPad (portrait only - landscape is grey box still). Also, menu still overlays image in portrait mode but not landscape on iPad (pro).
Thanks!
Hamish

Excellent! You figured it out. To fix the main menu overlaying the header image, try adding this CSS code:


@media only screen and (max-width:1024px){
  
  .site-header{
    position: static !important;
  }
  
}

Regards,
Kharis

Kharis you’re awesome.
Thanks so much - that worked great :slight_smile:
Best
Hamish

You’re always welcome here.

Regards,
Kharis

Hi Kharis,

I tried the code you gave me, but is not working- before there was like an empty box, now the only change is that there is nothing where the logo should be

Any idea?

Regards

Hello there,

I visited your site. It looks fine now. Have you gotten it sorted?

Regards,
Kharis

Hi again Kharis,
The fixes work on iPhones etc, but not on iPad Pro when in landscape mode (it’s fine in portrait).
Also, on all iOS the phone numbers turn into blue links (even if H3/H4). Is there any way to keep them styled as per the design?
Thanks!
hamish

Hello Hamish,

Please replace this code:


@media only screen and (max-width:1024px){
  
  .site-header{
    position: static !important;
  }
  
}

with:


@media only screen and (max-width:1366px){
  
  .site-header{
    position: static !important;
  }
  
}

Add this custom CSS code:


a[href^="tel:"] {
  color: #d65050;
}

Regards,
Kharis

Thank you Kharis,
Should I also update the PX width in the “hasbg” CSS?

No, you shouldn’t.

Regards,
Kharis

Hi there,
I am still getting issues.
Can you please check alexandrasontakalvan.com.au? Screenshot on iPad Pro
I am pretty sure there is a breakpoint issue? At 15inch screen it’s ok, but resize window and the white box appears quickly.
Appreciated in advance.,
Hamish

Hello there,

Try adding the below CSS code:


.header-clone{
  display: none;
}

within your @media only screen and (max-width:1366px) media query in your child theme’s style.css. So it will look like this:


@media only screen and (max-width:1366px){
  
  .site-header{
    position: static !important;
  }
  
  .header-clone{
    display: none;
  }
  
}

Regards,
Kharis