Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Morris
675 PointsDisplay-inline block failing on resize
I have my name and my girlfirends name in a <p> using a <span> all under my div. I'm using display inline-block to put both names side by side. This works fine in full screen on my laptop, however when I resize the window into a lower resolution my name which is on the left moves to right and my girls name on the right moves down a row. I also have a image of a wedding ring in between the two names ,but I didn't think it was relevant to post that code.Here is my code.
<div class="names">
<p>Michael<span class="names2">Christine</span></p>
</div>
.names{
margin-left: 350px;
margin-right: 350px;
color:#EEE8AA;
font-size: 60px;
text-transform: uppercase;
}
.names2{
color:#EEE8AA;
font-size: 60px;
text-transform: uppercase;
display: inline-block;
padding-left: 600px;
}
1 Answer
Steven Parker
243,318 PointsThe complete code would have been helpful. At least it would have made it possible to create a replacement.
If you want to keep them in the same line, why make the second one inline-block?
But the main issue is the fixed margins and padding sizes. If you want them to adjust to the window size, you might want to express them as percentages. Or in viewport units. Or you could re-work the entire thing using flexbox.