CODEWITHSUNDEEP
htmlcssmobilelayout
Victor Ferreira
Victor Ferreira

Reputation: 6449

Adjust Text and Image behavior in different devices with CSS

I have this webpage where there is an image on top and paragraphs on its right and bottom. This is the CSS I am using (sorry the CSS is directly in the HTML, I have to do this)

<div style="float:left" class='wrapper'>

<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

</div>

It seems to work fine even in mobiles. But I wanted to see the image centered at the top of the page when it's displayed in a mobile or tablet (smaller screens). Currently the image is close to the left side of the page when I open the website in a mobile. I wanted it aligned to the center of the page.

The picture below shows how I wanted it to be displayed in large screens and in mobiles (note that this is not exactly what happening now. the second image is what I want to achieve, but at the moment the image is closer to the left margin, and not aligned to the center)

enter image description here

Oh, and I can only use CSS. Is it possible?

Thank you all!

Upvotes: 0

Views: 274

Answers (1)

singe3
singe3

Reputation: 2105

You will need to use media queries in a CSS file.
This will add properties for screens with a width lower than 640px for example. 

@media screen and (max-width:640px){
   img{
        float:none !important;
        display:block;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

However you have to to remove float:left from the HTML and put it in a css file, otherwise the inline-style will override the media query

If you really can't modify the HTML. You should write float:none !important; in the media query write but it's a bad pratice to use !important

Update
Live example http://jsfiddle.net/7d3Lv/2/
Try resizing the Result box

Upvotes: 1

Related Questions