Issues With Mobile View Header And Logo - Question | JoomShaper

Issues With Mobile View Header And Logo

DA

Dina Abramson

Template 1 year 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.

0
5 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #69389

Hi there!

I have checked your site from both an android and iphone. They seems okay at my end. Please see the screenshot: F83DDC87-BE02-461D-BD8F-CCC210B7AE15.png

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

Best Regards

0
DA
Dina Abramson
Accepted Answer
1 year ago #69398

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.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #69487

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

0
DA
Dina Abramson
Accepted Answer
1 year ago #69489

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #70008

Sure! Glad that it helped:)

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

0