I am new to responsive web design and am attempting to hide a current large image and show a new small one when the screen width is less than 480px wide.
This seems to work well when I shrink the width of my desktop browser, but when I navigate to the page on my mobile phone it is still displaying the large image still.
The code I'm trying:
html:
<div id="wrapper">
<img src="lrgimg" id="lrgimg" alt="" />
<img src="smlimg" id="smlimg" alt="" />
<p>Some text , font size will change depending on device width.</p>
</div>
CSS:
#wrapper{
margin-right:0 auto;
margin-left:0 auto;
padding:10px;
width:80%;
border:1px solid red;
}
#smlimg{
display:none;
max-width:100%;
max-height:100%;
}
#lrimg{
max-width:100%;
max-height:100%;
}
/* media queries */
#media screen and (max-width: 480px){
#lrgimg{display:none;}
#smlimg{display:inline;}
p{
font-size:30px;
}
}
I assumed max-width was enough to satisfy most phone screen widths but apparently even though the screen widths have stayed the same the resolutions have increased hugely.
My question is: Is there a standard #media query that I can use that will satisfy most modern mobile phone browsers?
here is a demo
Depending on your screensize, 480px may still be too wide. (If the screen size IS 480, it won't break until #media screen and (max-width: 479px){ because a screen width of 480 is still included in #media screen and (max-width: 480px){
More statistics here: Mobile and desktop screen size statistics
Related
I am developing an oscilloscope type of instrument where the screen is a mobile device. I am using canvas to draw the oscilloscope image and I have several buttons to perform functions like setup, settings, etc. For the buttons, I use .png icons because they have a transparent background. Everything works fine if the user uses a tablet but I want to be able to use other devices like smartphones or laptops.
My problem is that I cannot make the .png images responsive to screen size. Besides having several different images for different screen resolutions and sizes, is there a way to make .png icons responsive?
Here is my button/icon code (nothing fancy):
.thumbs {
position: fixed;
bottom: 20px;
right: 20px;
width: 64px;
}
.buttonPNG{
display:block;
cursor: pointer;
border: 1px;
margin:2px;
}
<div class="thumbs">
<div class="buttonPNG">
<img src="./home.png" alt="home" onclick="show_home()">
</div>
<!-- several such buttons -->
</div>
The only way I can resize PNG images is to use the picture tag. This is not the best solution in my case, because the server is a tiny ESP32 with limited resources and storing multiple images for each button takes a lot of flash memory. But since it is the only solution until now, I post it if somebody finds it helpful. Multiple source tags can be present and one img tag, as a fallback if none of the source tags matches.
<div class="buttonPNG">
<picture >
<source media="(min-width:650px)" srcset="./next_L.png" onclick="selectionUp()">
<img src="./next1_S.png" alt="next" onclick="selectionUp()">
</picture>
</div>
Setting the width and height of an image to a percentage
If Im understanding the question correctly, you want to scale the images to size depending on the screen size. This can be done by setting the width and height of the image to a percentage. For example:
width: 70%; height: 70%;
will set an image to 70% of the screen width and height. If you resize the window, the image will become responsive and adjust.
Using media queries
Another way to get responsive images would be media queries. What you can do is say if the screen width is a certain width or less, set an image to a specific width/height. Here is some code that will set the background of the body to lightblue if the user is on a mobile device with a small screen size:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Here is a link to a tutorial on media queries and how to use them: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
EDIT
This is what I would do: I would set up some styling for your images meant for viewing them on a computer. Then I would use media queries to say if the viewer is on a small screen width (Phone) then change the styling and the same goes with a tablet. Some example code:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/*Stying for phones*/
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/*Styling for large phones.*/
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/*Styling for tablets and ipads*/
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/*Stying for labtops*/
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.buttonPNG{
display:block;
width: 100px;
height: 100px;
cursor: pointer;
border: 1px;
margin:2px;
}
}
So there I set up a bunch of queries saying that if the user is on a certain device with a certain screen width, styling the buttons a specific way. If you want the buttons to have a width and height of 20px on mobile, just add the styling inside the mobile loop where the comment is like so:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
.buttonPNG{
display:block;
width: 20px;
height: 20px;
cursor: pointer;
border: 1px;
margin:2px;
}
}
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
I've made a website that stretch a container to the bottom. In that container, there are divs that fit perfectly the screen at low resolution such as 1366x768 ...etc
But when the resolution is higher (1440x900...etc) There is a blank space left under the divs (link to view website at different resolutions)
So is there a possibility to fill that space with divs only in high resolution ? I've tried overflow-y:hidden,but since the container's height must be in auto it doesn't affect it.
Use media queries that target resolution like
#media screen and (min-resolution: 300dpi) {
#myDiv{
display:block;
}
}
Alternatviely, you can target dimension such as width like
#media screen and (min-width: 1000px) {
#myDiv{
display:block;
}
}
I am creating a two-column layout - left fixed, right fluid - and I'm using a media query to put the left column below the right (which is the main content) if the screen resolution is between 320 and 649 px (portrait or landscape).
When I test the layout to see how it responds to changing the width of the screen, it works just fine. However, when I start changing the height, at some point the breakpoint rule specified in the media query gets invalidated and the layout reverts back to the default.
I noticed that this point of invalidation is just when the height becomes equal to the width. For example, if I resize the browser (I'm using Chrome Canary developer console) to a width of 480px, everything works fine as per the media query as long as the height of the window is greater than 480px. The moment I resize the height to less than the width, say 479px, the rule in the media query ceases to hold and the layout reverts back to the original.
Here's an abbreviated excerpt of how the layout code looks:
HTML:
<div class="wrapper">
<div class="content"></div>
<div class="left_column"></div>
</div>
CSS:
.wrapper: {width:100%;}
.content
{
margin-left:240px;
float:left;}
.left_column
{
width:240px;
margin-left:-100%;
float:left;
}
#media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: portrait) {
.content
{
margin-left:0;
float:left;}
.left_column
{
width:100%;
margin-left:0;
float:left;
}
}
#media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: landscape) {
.content
{
margin-left:0;
float:left;}
.left_column
{
width:100%;
margin-left:0;
float:left;
}
}
I'm not sure what's causing this change in the layout when the height is altered since I don't have any media queries that specify height. Does anybody have any clue what the issue could be?
Managed to find the mistake - code for portrait query was different from that for landscape query.
I use media query and i want content on my web page be responsive.
is this code ok?
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
.navmob{margin-top:0px; margin-left:-100px; margin-right:100px !important; }
.sidebar { display: none; }
#navmenu {margin-top:10px; margin-left:auto; margin-right:100px; }
.content {width:auto; height:auto; margin-left:100px; margin-top:-50px;}
.contentsing{ width:500px; height:auto; margin-left:auto; margin-right:auto; margin-top:-50px !important;}
body{
background-image:none !important;
background-color:#000000 !important;
font-size:12px !important;
}
}
and why content is not responsive... Here is example
Here is code of my index
There is allot of bugs i found in console. Any way i cannot solve all of them but i can tell you, you need to work on width when you make a template responsive. These are some css line from i try to manage your template, Hop that help you
Put them as it is
#media(max-width:714px){
.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}
If you are testing your responsiveness by resizing your browser, device-width will not take effect. This is because the width of your computer screen does not change.
Use max-width/min-width. It targets the rendering area on the screen, therefore, when you resize, the CSS will take effect.
device-width targets the screens resolution.
max-width/min-wdith targets the screens rendering area.
This is the wrong way to go about a responsive website. You need a series of media queries to cater for:
desktop 1024px
ipad 768px
iphone 320px
Once you have these breakpoints set up the site will respond as expected, all content needs to be set to % in terms of width so it can adjust accordingly. Also do not use px use em for font sizes as this will auto re adjust for you.
Look into using a front end framework such as bootstrap as this does a lot of the hard work for you by using a 12 column grid layout system.