- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi. This code is working for me:
.site-branding img {
position: absolute;
left: 50%;
margin-left: -100px; /* Half the width */
}
HOWEVER, when the screen size is reduced, any elements beneath the header jump up and go BEHIND the logo. The logo was originally at left in the header (theme default) – and this overlapping did not occur at smaller screen sizes – elements stayed put below. Got a fix? Thanks!
When you position something absolutely it is removed from the flow. In other words it won’t affect the things around it.
Most likely though, this is overkill. You should just be able to put text-align: center
on its parent instead.
Of course, without real code to look at I’m just guessing.
Thanks for replying.
text-align:center was the first thing I tried, but didn’t work. The code that’s “almost” working:
.site-branding img {
position: absolute;
left: 50%;
margin-left: -100px; /* Half the width */
}
I got off the CSS TRICKS site. There’s gotta be a way! Thanks.
You’ll need to set up a reduced test case on CodePen or provide a URL, otherwise we can’t help.
Here’s the URL: mondorcreative.com
Thanks!
As I stated originally, an absolutely displayed item is outside the flow of the page. So when #masthead
collapses on your “mobile” breakpoint, the content that it was keeping down comes on up.
You can solve this any number of ways… you can piggyback on that breakpoint and make the image the same size as the new menu bar… if you don’t want to make it smaller (probably a bad idea), you can just make it position: relative
instead, but then you’d need to restyle it for centering. And I’m sure there are many other ways to do it.
I’d also look into making a responsive typography scale so that mobile screens aren’t overwhelmed by huge headings.