- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 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
I have this code
and this css
article{
max-width: 300px;
height: 300px;
background: red;
margin: auto;
}
header{
width: 130%;
height: 100px;
margin-left: -30%;
background: blue;
}
This is exactly what I want. However, on a smaller screen, there is no space on the left, so there is 30% white space on the right, but on the left, the header touches the edge of the screen. At this point, I wish that I could align my article in the center, but based on the headers width.
I know that I could wrap the article in a div and it would fix the problem ([codepen sample](http://codepen.io/aurelkurtula/pen/Juzke “”)) . But now that I noticed this problem, I’m just curious if there was a solution to this without using a wrapper.
Thanks
You should just use a media query to target smaller screen sizes and provide separate styles.
I started using media queries and it works great. But mostly because there are always little css tricks that I dont know about, I though there might be something to learn in this case.