- This topic has 5 replies, 3 voices, and was last updated 9 years, 2 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
Hello fellow StudioPressers,
I almost feel silly asking for help on this, because it seems like it should be so easy.
My website is http://theblogninja.com/
I am trying to get the green header image centered across the top, AND make it responsive when I change the browser width.
So far, I have only be able to do 1 of them at a time. When I make the header image centered, then it isn't responsive. When the header image is on the left side (like it is now), then the image is responsive (you can see by dragging in your browser width).
Anybody have any ideas on how the heck to make it both centered AND responsive? I'm using the Genesis Child Theme.
P.S. I have tried the WP Sites tutorial and many other guides on I could find on the topic, but none of them worked...
Please read the forum rules:
Post discriminatory, defamatory or derogatory threads or replies. Shout (USE CAPS) or use profanity.
My apologies, my use of caps wasn't intended as shouting, but rather to emphasize the word "and". I'll make sure to use quotations next time and not caps.
I just looked at your page in Chrome Dev Tools, which has a device emulator. Looks fine to me - it's centered on all the device sizes I looked at.
Also your CSS looks okay - as if it would produce the result you're going for. The two things I was looking for were:
You used a percentage to define the width.
You defined the margin as 0 auto.
I think you're good to go.
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
Thank you for double checking that. The only thing I see that happened by adding that code though was that it added a little extra white space under the image. Not sure why though...
Any ideas on how to get rid of that space?
I actually just figured out how to get rid of it. The space was there for the Site Description, so I just removed it.
© 2023 WPEngine, Inc.