CODEWITHSUNDEEP
htmlcssresponsive-design
user2411417
user2411417

Reputation:

Responsive CSS with Images

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>

Upvotes: 0

Views: 240

Answers (1)

lukeocom
lukeocom

Reputation: 3243

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

Upvotes: 1

Related Questions