Center aligning an image in Header in Magazine Pro theme

[Kieren93]

I have been trying to center-align an image in the Header area of my Word Press site by adjusting the CSS using the HTML editor, using instructions previously provided for another person with the same issue:
https://studiopress.community/topic/magazine-pro-center-blog-name-in-desktop-view/

Despite following the instructing I have been unable to center-align my image. I have inserted 'text-align: center;' to the title-area of CSS but the image will not move. By default the image is left-aligned. Any advice would be much appreciated

Here is my Word Press site:
http://www.themealquest.com/

http://www.themealquest.com

[Victor Font]

In your case, you have to do something different. Find this CSS in styles.css around line 1233

.title-area {
    float: left;
    padding-top: 30px;
}

and change it to:

.title-area {
    margin: 0 auto;
    padding-top: 30px;
}

The float: left forces the image to align with the left margin. By removing this and changing the left and right margins to auto, you are centering the image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Kieren93]

I applied your code to the CSS and while the logo did align to the center, when I refreshed the page the logo aligned back to the left again and the changes I made to the code reverted to how it was before 🙁

[Victor Font]

How did you make the changes?

Code doesn't just revert after you make changes. If you made changes in the browser inspection tool, they are not permanent. If you made the changes by editing the style sheet through FTP, they are permanent but sometimes caching plugins may not pick up the changes and you're looking at old versions of the style sheet.

Whatever the case, it has something to do with your environment and nothing to do with the Genesis Framework or your child theme.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Kieren93]

I used the developer tools within Chrome and made the changes there. I'm new to coding and assumed that making the changes would be a straightforward process.

I did however go into the 'Additional CSS' section under 'Customisation' of my Word Press site but I could not see any lines of code to modify. That's why I used the browser inspection tool, as that's where I could see the lines of code

[Kieren93]

I've now gone into the Theme Editor and changed the code there (rather than use the inspection tool) but the logo still won't center-align. This seems odd given that the changes to the code were saved as I went back into the Theme Editor to double-check.

What could be the problem?

[Victor Font]

Caching is the issue now. Browsers don't update style sheets unless the version changes. If you want to force a refresh of a style sheet, first clear all caches on the server, through a caching plugin if you're using one, or your CDN if you're using Cloudflare or another CDN. Then, hold down the shift key while you refresh the page in the browser.

As an FYI, I just force refreshed your style sheet in my browser and the logo centers perfectly.

Also, be careful when using the theme editor. If you make a mistake like a typo or something else while editing code in the theme editor, it could bring down your site. You'll have no choice but to use FTP to recover the site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Kieren93]

Making those changes have worked. Before I used a caching plug-in to make the changes I did notice that using the Incognito mode in Chrome center aligned the image, so it looks like caching was the problem as you suggested

Thanks

[Author]

Posts