Jump to content

Larger Images on mobiles


irncru

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

Link to comment
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>

 

Link to comment
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.

Link to comment
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
×
×
  • Create New...