irncru Posted August 28, 2017 Share Posted August 28, 2017 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 More sharing options...
dsonesuk Posted August 28, 2017 Share Posted August 28, 2017 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. Link to comment Share on other sites More sharing options...
irncru Posted August 28, 2017 Author Share Posted August 28, 2017 Sorry I think I made myself sound more competent with coding than I am, could you elaborate on the second sentence? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2017 Share Posted August 29, 2017 <!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 More sharing options...
dsonesuk Posted August 29, 2017 Share Posted August 29, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now