Site Looks Different on Different Browsers - Ethos 1 Theme

Support
#1

Hi, my website is https://woodworkingjunction.com. I’m using Ethos 1 and built the site on a Mac (Safari browser). The site looks great on that browser, but the layout, color scheme, etc. is completely different on other browsers. Also, on a mobile Safari browser (iPad), the site looks as it does on the Mac except the Navbar covers the top of the content on each page and the logo is shifted up and to the left. Please tell me how to fix thses issues.

#2

Hi there,

Thanks for writing in! I have tested your site on Firefox, but I couldn’t identify the issue.

Could you please provide us with a screenshot, so that assist you further.

Thanks!

#3

I may have resolved the issue of the color scheme, layout, etc., being different on other browsers. I turned off a mobile responsive setting in one of my plugins. However, I attached a screenshot showing how the navbar covers part of the content on my iPad Safari browser. The same issue appears on Chrome, Bing, Firefox mobile browsers and Yahoo search engine. It appears the navbar is not being responsive to mobile devices.

#4

Hello There,

Thanks for sending the screenshots. The issue is happening because as you resize the browser, there isn’t enough space to display the logo and menu on the left/right position. To resolve this issue, we need to reduce the image width and fit it in the left side. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 1080px) and (min-width: 980px) {
    .x-brand img {
        max-width: 175px;
        margin-top: 20px;
    }
}

Hope this helps. Please let us know how it goes.

#5

I added the CSS code in Global CSS as instructed, but that did not solve the problem. The navbar still displays over top of the content on mobile devices. Please let me know if there is another solution.

#6

Hi there,

The CSS solution did work, in my case I checked all the screen sizes till it hits the mobile menu threshold and the problem is gone:

Please kindly clear your browser cache on Ipad and check again or use another device for checking.

Thank you.

#7

Thanks, Christopher. You are correct that the problem is resolved. Although I cleared my browser, I was still seeing a cached version.

#8

Hi there,

That is strange. Maybe the problem is the difference between Chrome and Safari? Is it ok now or still not showing correctly, I wonder if you have access to another iPad to check the case.

I test ed the case with the Google Chrome Browser. Thank you.

#9

It is OK now. No follow up is needed at this tiem. Thanks!

#10

You’re welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.