It's been a while since I had to do a responsive edm template and screen sizes have gotten larger.
I've been testing and failing miserably all afternoon - I essentially just wanted to have 2 media queries to target the 2 main breakpoints of:
Breakpoint 1 (iPhone 5S): 320px (shows 320px)
Breakpoint 2 (iPhone 6+): 414px (shows 375px)
So I don't understand why the below doesn't work
#media screen and (max-width: 414px) {
table.bannerTable img {width:375px !important;}
}
#media screen and (max-width: 361px) {
table.bannerTable img {width:320px !important;}
}
I just want to have one banner image thats 700px wide in desktop, 375px wide in large smart phones and 320px wide in the rest of devices.
Related
I believe I have formatted my media query incorrectly as it is not only working for the devices I wish to target (Small laptop screen and tablets) but is also being applied to my desktop screen size.
Do I need the extra set of {} being used here?
/* Medium devices (landscape tablets, 992px and up) */
#media only screen and (min-width: 992px) {
.wpb_text_column.wpb_content_element.vc_custom_1565090087252.DANSpace {
padding-bottom: 220px !important;
}
}
The problem is that you've set a minimum width but not a maximum width. This means that whatever is inside the mobile query will be applied whenever the users width is above 992px.
To target everything below that you would need to change it to max-width like so:
#media only screen and (max-width: 992px) {
.wpb_text_column.wpb_content_element.vc_custom_1565090087252.DANSpace {
padding-bottom: 220px !important;
}
}
You can also target between certain widths by doing the following:
#media (min-width: 576px) and (max-width: 992px)
This is my bootstrap website: http://www.feather.com.lk/index.php
My main issue is in iPad portrait view. The elements are not resizing as intended. However, further investigation into the issue showed that I only have this issue when the browser size is scaled down to 768px and 769px. I'm not sure how to solve this issue.
The media queries I used:
#media screen and (min-width: 0px) and (max-width:769px)
#media screen and (min-width: 770px) and (max-width: 992px)
#media screen and (min-width: 993px) and (max-width: 1199px)
#media screen and (min-width: 1200px)
It seems like there is a mismatch between your media queries and the ones provided by Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
(Bootstrap Media Queries)
As you can see here, the smallest Bootstrap media query takes a maximum width of 767px (notice that the next one starts from 768px). However, the smallest media query that you have used takes the width of up to 769px. That must be the reason why there are two pixels, where the website doesn't look as intended.
Try changing your media queries to be the same as the ones in Bootstrap.
I've been trying to understand how to override bootstrap media queries for a little while now and I still do not understand how to disable certain media queries (do I have to manually override every element?).
My media queries are as follow:
/* anything > ipad */
#media only screen and (min-width: 972px) {
.container {
width: 960px;
}
}
/* iPhone portrait */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
}
/* iPad portrait */
#media only screen and (max-device-width: 640px) and (orientation: portrait) {
}
I want my site to have a 960px container on iPad + Desktop, and to load a full screen image on anything less than an iPhone. If the tablet or device is say a max width of 700px, they will get a 960px wide site with a horizontal scroll bar. I'm unsure how to this with bootstrap 3, I'm not using it with LESS.
I'm trying to use these six media queries in my project:
#media screen and (min-width:320px) {} //for small mobiles and large mobile in portrait
#media screen and (min-width:480px) {} //larg mobiles and mobiles in landscape
#media screen and (min-width:600px) {} //for small tablets
#media screen and (min-width:768px) {} //for normal tablets
#media screen and (min-width:1024px) {} //for normal tablets, laptop, desktop
#media screen and (min-width:1281px) {} //large laptop, desktop
But something strange happens, only my first media query is working fine; the others don't work, and the others work combined. For example, in my #media screen and (min-width:1281px) media query, the result I have is the header and footer of this media query and the body of my media query (min-width:480px).
Does somebody out there know why this is happening?
my layout works fine in big monitors....
but i am trying to display properly in small screen laptops....
which width should i need to use it in the css media queries for the 13 inch monitor...
i am confused abt width for 13 inch laptop
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (min-width: 1200px) {
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
Most 13" monitors are going to be larger than 960px or even larger than 1140px wide. 960px wide is kind of an old standard, more often now 1140px is used, especially for responsive design.
That said, only a netbook with a 8" or 9" screen will have issues displaying. Every 13" monitor I know of should not have any issues displaying your web page. If you want to design for the netbook, they are similar in resolution to most tablets in portrait position. So if you are doing media queries for tablet and mobile phone, then the netbooks should adopt the styles of the tablet, as their resolutions are 800x600 up to 1024x768.
In general, there is no reason to make a different set of styles for anything other than mobile phone and tablet.
Here you can fund all resolutions and their screen sizes:
http://www.codeply.com/responsive-design-cheatsheet.html
For the question you asked:
13' Macbook Air 1440 px x 900px 13 inches
For more testings and research, You can also check this website that tests all required screen resolutions as well provide option to enter custom screen sizes:
http://www.infobyip.com/testwebsiteresolution.php
PS: None of the websites I mentioned above are connected to me, I am just a regular user and a web developer.