Solved Templates

Issues with mobile view header and logo

Asked by Dina Abramson 4 years ago Last activity 4 years ago

Hi,

I use a window resizer on desktop to work on changes on mobile (usine inspector). Then I go to my phone to view the site.

I have 2 issues:

top bar height is too high (on actual phone) and covers logo and hamburger
and
colors of the social icons are not correct (i changed the css and on desktop are fine.
screenshots:
desktop with window resized - https://awdtest4.com/images/iphone6-screen-size-image-view-on desktop.png
actual phone view - https://awdtest4.com/images/actual_iphone_view.jpg

I have specified the colours in the template basic and presets for topbar and header height/logo height and changed the mobile image size in css.

Any help is greatly appreciated.

Accepted answer

Marked as the solution

Rashida Rahman Staff

4 years ago

Hi there!

I have checked your site from both an android and iphone. They seems okay at my end. Please see the screenshot:

KINDLY, CLEAR YOUR JOOMLA AND BROWSER CACHE THEN CHECK AGAIN.

Best Regards

4 more replies

Dina Abramson Asked this

4 years ago

Thanks, that fixed the issue with the top bar.

I am unable, however, to increase the size of the logo on MOBILE to 120px and center it between the slider and topbar.

The css I add (even with !important) looks like it works on the inspector, but never takes when saved.

Can you possibly assist with enlarging the logo on mobile as it is unreadable as it is currently.

Thanks.

Rashida Rahman Staff

4 years ago

Hi,

I have changed your mobile logo image height from your template options as follows: https://prnt.sc/RAXBL6sEFNgy

Then removed the following code from your custom css field:

@media (max-width: 575px)
#sp-header {
    height: 140px !important;
   }
@media (max-width: 575px)
#sp-header .logo {
    height: 140px !important;
}
@media (max-width: 576px) {
  .logo-image-phone {
      height: 120px !important;
      margin-top: 20px !important;
  }
}

And then added the following code:

@media (max-width: 575px){
#sp-header, #sp-header .row, #sp-header .row .logo{
    height: 120px !important;
}
}

https://prnt.sc/R8gnkw0hIa9R

Please check now and let me know if it's okay or not.

Best Regards

Dina Abramson Asked this

4 years ago

thank you so much it is perfect. i will save this answer as im sure i will run nto this again

Rashida Rahman Staff

4 years ago

Sure! Glad that it helped:)

You are always welcome... Do let us know if we can help you anytime!