Responsive CSS with Images

Question

I am trying to achieve the following in the image posted below. When I resize the browser I want the image and button to decrease in size but maintain the same ratio with the main background. I also want the text to not overlap the image so the font size should get smaller. How can I achieve this in css? Heres the image: https://i.sstatic.net/Ycebr.png

This is the HTML code I believe should be correct. I've tried in the CSS absolute positioning of the image, i've tried floating each element and using percentages for widths. If it gets to a mobile width I would just display:none on the image but keep the button. Any help is appreciated.

<div class="content">
  <div class="text>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
  </div>
  <div class="image">
    <img src=".." />
    <div class="button"></div>
  </div>
</div>

Can you share the CSS you have tried? StackOverflow is not designed for coding up entire solutions. — David Storey
– David Storey, Commented May 22, 2013 at 22:44
Here's a fiddle with the code he posted: jsfiddle.net/jakelauer/GkrpR — Jake
– Jake, Commented May 22, 2013 at 23:07
Using media queries and a div would provide a potential optmization over just using display: none; as it would only load the image as a background to a width: percentage styled div if it was within your boundries, otherwise would be overlooked. It would only take two media query blocks.. — Brett Weber
– Brett Weber, Commented May 23, 2013 at 3:34

lukeocom · Accepted Answer · 2013-05-23 07:28:46Z

1

I have created a fiddle based on the link by Jake - http://jsfiddle.net/GkrpR/2/ It changes the size of the image and text box when you resize the screen. It's a bit rough, so will require you to change the css values to suit your needs. But should be a good start for you.

It uses media queries in the css to check the max screen size, and then changes styles based on that.

As an example, when the screen size gets to 300px or less the following style is used:

@media screen and (max-width:300px){     
    .image img{width:45px;height:50px;}
    .text{height:30px;font-size:6pt;color:#aaf;}
    .main{width:100px;}
}

Hope this helps

edited May 23, 2013 at 7:28

answered May 23, 2013 at 3:04

lukeocom

3,2533 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Responsive CSS with Images

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related