Jump to content
irncru

Larger Images on mobiles

Recommended Posts

Hi guys,

So I'm just trying to make my site a bit more mobile friendly. I currently set the width to a % on images so as to keep them consistent on screen sizes. The only thing is the widths aren't compatible on mobiles and screens. 

If you see the images on this page http://www.brightonyouthcentre.org.uk/skateboarding/ ,they are fine on a computer, but way too small on a mobile when only spanning 60% of the screen or whatever. Really I'd like for them all to take up the full width. 

My first thought was to use a media query to say "if on mobile then make width 100%", BUT my problem is I use inline CSS for each of the images because I don't want them all the same width, so I think a media query would be overridden? That's what it seems like anyway as I tried it and nothing happened. If anyone has any suggestions that would be great! Thanks

Share this post


Link to post
Share on other sites

The idea is to make them 100% width, and control the size of container the are in by media query.

To override inline element styling, if not using !important for inline, use it in media query css.

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">
            @media only screen and (max-width: 600px) {

                body:before {content:"Device width 600px and below media query";
                             position: fixed;
                             background-color: yellow;
                             top: 20px;
                             left: 20px;
                }

                img {width: 100% /*!important*/;} /*!important seems not to be needed? if required remove comment tags*/
            }
        </style>
    </head>
    <body>
        <div><img class="aligncenter size-full wp-image-2665" src="http://www.brightonyouthcentre.org.uk/wp-content/uploads/2013/11/summer-opening-hours-2_1.jpg" alt="summer opening hours 2_1" srcset="http://www.brightonyouthcentre.org.uk/wp-content/uploads/2013/11/summer-opening-hours-2_1-212x300.jpg 212w, http://www.brightonyouthcentre.org.uk/wp-content/uploads/2013/11/summer-opening-hours-2_1-768x1087.jpg 768w, http://www.brightonyouthcentre.org.uk/wp-content/uploads/2013/11/summer-opening-hours-2_1-724x1024.jpg 724w, http://www.brightonyouthcentre.org.uk/wp-content/uploads/2013/11/summer-opening-hours-2_1.jpg 848w" sizes="(max-width: 848px) 100vw, 848px" width="54%" height="auto"></div>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Note

width="54%" height="auto"

This is not css, and width with percentage or value not made up of just digits is invalid. This is valid css: style="width: 54%; height: auto;" which would have caused override conflict you talked about, but width and height attributes would not even if valid values used.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×