Search code examples
htmlcsswidthmedia-queries

Set div width to adjust at different resolution

Please check this link

The left panel text goes hidden under the center picture if I re-size the browser window.

How do I fix it?

Solution

  • Set .ac-wrapper h2 30% instead of 50%

    .ac-wrapper h2 {
    width: 30%;
}

    EDITED

    html

    <div class="ac-device">
    <h2 style="color:#888888">Logical &amp; analytical. <span>Argues till someone <br>just walks away!</span></h2>
    <a href="#" title="What's different about me?"><img src="images/screen1.jpg"></a>
    <h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>

    CSS

    .ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}