smaller image size for smartphones

  • Hi,

    I am using the ShootingStar theme and unfortunately there is no support page for it.

    I just want that the ink and quill image become smaller – half the size – on smartphones only. It’s fine on tablets and laptops. I need more text around the image on a smartphone, otherwise it looks bad.

    Thanks!
    Taruska

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • This problem is not theme specific. Most themes that I encountered don’t center-align floated element in small screen. So we have this usual problem, floated image with text wrapped around look okay in big screen but not so good in small screen. To fix this problem just center-align all floated images in small screen.

    This code works in your situation. Just put it in Additional CSS section (clear browser cache to see the updated).

    
@media only screen and (max-width: 480px) {
	figure.alignright, figure.alignleft, figure img, img  {float:none;display:block;margin:0 auto !important;}
}
    Thread Starter taruska

    (@taruska)

    Thanks. And how do you shrink the image itself?

    Hi again, first of all there had been some changes the in the site (specifically the <figure> containing the <img> had gone) so the code above wouldn’t work now.

    This is the updated one

    
@media only screen and (max-width: 480px) {
	img.alignright, img.alignleft {float:none;display:block;margin:0 auto;}
}

    To center align the image (undo the float) in small screen AND also shrink the image, use this code. Notice that it just has the last bit width:40%; added in.

    
@media only screen and (max-width: 480px) {
	img.alignright, img.alignleft {float:none;display:block;margin:0 auto; width:40%;}
}

    If you only want to shrink the image in small screen AND keep the float (left/right align), use this code.

    
@media only screen and (max-width: 480px) {
	img.alignright, img.alignleft {width:25%;}
}

    This code works site-wide, it’s not specific to this page only. Put the code in Additional CSS section.

    Thread Starter taruska

    (@taruska)

    Hi,

    Thanks again for your help!

    I’ve done this. Seems to work:

    @media only screen and (max-width: 400px) {
    figure.alignleft, img.alignleft, figure.alignright, img.alignright {
    float: right;
    max-height: 50%;
    max-width: 50%;
    }
    }

    Please note that your code above will force left-aligned image to be right-aligned in small screen. If all you want is to control the width in small screen situation, then leave the float as is (do not declare it in your code), it will just use whatever defined (left align will float left, right align will float right).

    Also I wouldn’t mess with max-height, the max-width or just width would do the trick.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘smaller image size for smartphones’ is closed to new replies.