Logo and page width issues

[John Cathcart]

In the “Basic Settings” with the “Page Width” set to the default “1400px” the actual presentation of the page in the browser comes out at 1750px wide instead of 1400px wide. If I set the “Page Width” to 1200px, than the page actually comes out at 1500px wide in the browser.

Regardless of the size of the page width, the logo section will only display an image at a maximum of 1425px wide. Any image larger that 1425px wide is resized down automatically to 1425px wide.

I am trying to place an image that is the exact width of the content area. Because of these two issues (page not being the actual size it says in the settings) and the logo limitation of 1425px width, I cannot make the logo and the content area match up in width.

I have attached 3 images to illustrate the issue.

The first image shows a page set to 1200px that renders at 1500px wide. Also shows the logo maximum of 1425px

Second image shows a page set to 1400px that renders at 1750px wide (with 1425px wide logo).

Third image shows a page set to 1400px wide. The logo at the top is actually 2000x200px in size. When rendered in the theme the logo shows up at 1425x143px.

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

HI John Cathcart,

We have tested on our theme and page width is working fine customizer setting. We have attached the screenshot of it. And regarding to logo width , it’s constant on both cases ie 11400px. Please verify if you didn’t have customize grid layout of a theme.

Please provide us link of your website so we can track the exact issue of your website.

Thanks

Attachments:

You must be logged in to view attached files.

[John Cathcart]

The site I’m working on right now is SpearfishAcademy.com

I don’t believe I have a customized grid layout. I am using the full width layout option (no side bars).

I see exactly what you do in the code. That is not the problem. Please see my attached image.

The code definitely SAYS that the lower portion of the page is a maximum of 1400px wide, but when measured edge to edge in photoshop, you can see that it is actually 1750px wide (an extra 350 pixels wide). If I set it to 1200px, it comes up at 1500px wide (300 extra pixels wider than it should be).

Additionally, the logo image at the top of the page is 1750px wide (made to match the width as it appears currently), but when the logo is rendered on the page, it gets scaled down to 1425px wide. It doesn’t seem to matter how large I make that image. It can be 2000px wide originally or 1500px wide… it still gets scaled down to 1425px wide, which does not match up with the width of either the 1200px or 1400px wide setting for the page itself. Therefore the top logo can never be as wide as the bottom is (which I want it to be exactly as wide).

Thanks for your time and I look forward to figuring this out.

**Note** my first attempt at replying here the attachment was too large, tried to edit/replace and then my whole reply disappeared.**

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi John,

Sorry for not making your clear.As told on previous reply, logo dimension will remains constant on both page width 1140px. So you have to take the image accordingly.

When you set page width of 1400px then your page width will be in-between 1200px to 1400px depending upone your screen resolution. We had attached screenshot of the image measuring on larger( 1600×900 ) and smaller desktop( 1366×768 ). Please have a look on the attached screenshot.

Hope this clarify your issue.

Thanks

[John Cathcart]

Okay… I think there is some kind of communication problem here.

If page width set to 1400, real size is 1750 in browser. Where does the 350 come from?
If page width set to 1200, real size is 1500 in browser. Where does the 300 come from?

Why is the logo resized to 1425px if the image selected is larger? I want the logo to match the width of the bottom of the page. So logo needs to be 1500px OR 1750px wide because that’s how wide the bottom ends up. What is limiting the size of my logo image to 1425px wide? Where is the code that is resizing my image to smaller than I want it? I need to change that code.

Did you look at my last image that I attached? It explains what I’m talking about.

[Bidur]

Hi,

>> It is showing the exact width what selected in customizer. we don’t have idea about how you save it in Photoshop and its width it might be due to your Photoshop scale. Please check once again.

>> Logo header image of theme will be displayed smaller than content area. Design of the theme is like that. If you want to change it you need to add following css in additional css in customizer.

#pref-top .container {
    width: 1400px;
}

[Author]

Posts