Docs

[BudgetExhaust]

I noticed my website looks zoomed in on certain computers.

On my 27″ iMac the website looks PERFECT. If I use my macbook the menu bar starts to go into 2 rows and the header images is giant. If I try an office computer it’s just MASSSSIVE and looks horrible.

How can I make it so my website looks the same on all computers?

http://www.budgetexhaust.ca

Thank you so much, and I appreciate any help!

[BudgetExhaust]

Even on mobile, My header doesn’t re-size. Here is an example!

[Joao]

Hi there,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 1470px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
}
}

@media (max-width: 1180px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 13px;
}
}

Hope it helps

Joao

[BudgetExhaust]

That didn’t seem to fix anything 🙁 I added it, saved it then refreshed on all computers and it’s still the same.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[BudgetExhaust]

This reply has been marked as private.

[BudgetExhaust]

Has there been any update on this?

[Jade]

Hi there,

Thanks for the details.

Kindly go to Appearance > Customize > Header > LINKS – TEXT : Navbar Font Size (px) then set the value to 14px.

And update this code from the customizer:

.x-logobar-inner {
    background: url(http://i.imgur.com/nGwKB46.png) no-repeat center top;
}

to

.x-logobar-inner {
    background: url(http://i.imgur.com/nGwKB46.png) no-repeat center top;
    background-size: contain;
}

Then add this code in the customizer:

@media (max-width: 797px) {
    .x-logobar-inner .x-container {
        display: none;
    }
}

Hope this helps.

[BudgetExhaust]

This still has not fixed the problem.. My issue is the ENTIRE website is zoomed in on different devices. Not just the header… This code also zoomed out my header but left a giant space under it?

The one that looks normal is my 27″ iMac…

I sent the screen shots of all different screens.. the normal macbook size screen – the menu bar transfers into 2 rows, instead of just zooming out to make it one solid row.

I hope this better explains myself.

Thank you again

Stephanie

[BudgetExhaust]

Macbook Screen.. Naviagtion on 2 rows- very zoomed in

[Lely]

Hi There,

Upon thorough checking, added CSS is not working because there is CSS syntax error. Look for this part:

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
  color: #fff;
  opacity: 0.65;

There’s a missing closing curly brace.
Update to this:

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
  color: #fff;
  opacity: 0.65;
}

Regarding the black part under the logo, please also add this:

@media (max-width: 980px) {
.x-brand img {
    width: 71px;
}
}

Since you have added the image as background it doesn’t have height. It’s height will depend on the content inside. You have added a transparent image with dimension 1334×1022. Then you have declared its width to be 300px. When it is 300px, it’s height will be 230px. This 230px is the height that the background will follow.
Background size is 1200×300. This will adjust proportionally. So when it adjust it cannot cover the entire 230px height. That’s why above CSS will adjust the height thus remove the black area.

Hope this helps.

[BudgetExhaust]

AWESOME!!!! This seemed to work!
It’s still a little bit zoomed in on a PC compared to my MAC.. but at least the naviagtion bar is on one row now 😀

Thank you so much

[Joao]

You are welcome 🙂

[Author]

Posts