I am sitting and reading on this page
Media Query
It says here:
/* iPads (landscape) ----------- / #media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : landscape) { / Styles */ }
/* iPads (portrait) ----------- / #media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : portrait) { / Styles */ }
But there is no difference in those two codes? That result in that I make my elements fit on fx landscape mode. Then I go to Portrait mode, and everything is flying around.
How can I design the responsive, so I seperate Portrait and Landscape mode?
CSS
/* iPads (portrait) ----------- */
#media only screen and (min-width : 768px) and (max-width : 1024px) {
.ebook-image {
width: 600px;
display: block;
margin: 0 auto;
margin-top: -30px;
}
.ebook-image img {
margin-left: 0px;
}
.header-box {
background-color: #163A4E;
height: 680px;
margin-bottom: 0px;
padding: 0px;
}
.header-text h1 {
font-weight: 900;
font-size: 40px;
line-height: 1;
text-transform: uppercase;
color: #fff;
position: relative;
left: 0px;
top: -10px;
}
.header-text h2 {
font-size: 20px;
margin-bottom: 25px;
font-weight: 900;
color: #fff;
position: relative;
left: 0px;
top: -30px;
text-align: center;
}
}
iPads (landscape) -----------
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.ebook-image {
height: 500px;
width: 590px;
}
.ebook-image img {
margin-left: -190px;
padding-top: 0px;
}
.header-box {
background-color: #163A4E;
height: 350px;
margin-bottom: 0px;
padding: 0px;
}
.header-text h1 {
font-weight: 900;
font-size: 40px;
line-height: 1;
text-transform: uppercase;
color: #fff;
position: absolute;
left: -400px;
top: 110px;
}
.header-text h2 {
font-size: 20px;
margin-bottom: 25px;
font-weight: 900;
color: #fff;
position: absolute;
left: -405px;
top: 150px;
}
}
The queries are quite different; note the trailing and (orientation : landscape) and and (orientation : portrait) in both media queries.
Here's a fiddle that demonstrates these queries by applying a different background color when viewed in landscape or portrait mode.
https://jsfiddle.net/dem49e87/2/show/
Make sure to open it on your phone and check it out in both portrait and landscape mode.
#media (min-width: 700px) and (orientation: landscape)
This way you make sure you combine a min-width with the orientation of the device. You can (and should) use the orientation markup for your layouts if you have different behaviours.
Related
(some background, I'm a designer who's trying to learn how to code!)
I'm having trouble fixing the search input field surrounding area for mobile for https://www.agjeans.com. It's cut off at the top in mobile view. While in Chrome dev tools, I'm able to seemingly fix the issue, the reality is that when I input these code changes they seem to do nothing.
I've done a variety of code changes, such as
#media only screen and (max-width: 768px)
.header-search .mobile-search-active+.search-wrapper {
padding-bottom: 72px;
border: 0;
margin-top: 30px;
}
and have done
#media only screen and (max-width: 768px) {
.search-wrapper {
margin-top: 30px !important;
}
}
and also
.search-button-container.mobile-search-active {
margin-top: 30px;
}
As you can see, these resulting changes look great in dev tools, but do nothing when actually implementing the code. I've looked at the site on my own personal phone as well as in the browser, so the issue remains persistent.
Also, if I add something ridiculous (like specifying 300px margin-top for the header) it does show in the site, so I know it's just with this issue. What's the correct solution?
All this is done in the style.min.css file. This animation is the result of all the steps below - https://ibb.co/zJWnLbf.
Initially your selector #media only screen and (max-width: 768px) .header-search .mobile-search-active + .search-wrapper looks like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
}
}
You need to add a top: -37px. And now this selector should look like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
top: -37px;
}
}
Ok, now we need to correct the closing cross. To do this, you need to turn to the selector #media only screen and (max-width: 480px) and (min-width: 320px) .header-search .search-button.active looks like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: -32px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
You need to add a top: 10px and remoeve a top: -32px. And now this selector should look like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: 10px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
And the same top: 10px rule needs to be added for the #media only screen and (max-width: 768px) and (min-width: 370px) .header-search .search-button.active selector. As a result, it should look like this:
#media only screen and (max-width: 768px) and (min-width: 370px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
top: 10px;
left: 20px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
I have created several #media Queries to try and capture different displays. Im using chrome developer tool and whenever I switch the size of display it defaults to whatevere media query is lowest in the css. My original solution to this was putting the smallest down bellow, but now when i test it with my monitor it says 1440px is being used instead of 1920px. So i solved my issue when it comes to Mobile devices but have recreated it with monitors. How can I get around this issue?
2286BowmanRoad.com
CSS sample Bellow it is replicated from high to low and consist of
Bottom -> Top 360, 375, 450, 680, 780, 1054, 1366, 1440, 1680, 1920, 2560, 3840
/* Start of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1920px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 1.5em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1680) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1440px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
You structured your media queries incorrectly. You can either group all of your css that corresponds to each view port or you can target media queries on individual classes. Here is a guideline to see an example of properly structuring and the sequence.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
For future reference, please give more details about your problem. It would be much more helpful if you were able to share the CSS code that is not working so we can work with you to resolve the issue.
My first instinct is that you're not using media queries correctly, here's a couple examples for you to look at:
#media only screen and (min-device-width: 960px) {
#wrapper { width: 70%; }
}
#media only screen and (max-device-width: 960px) {
#wrapper { width: 100%; }
}
The first media query will activate for any device where the screen width is bigger or equal to 960px and the second media query will activate when the screen width is smaller or equal to 960px.
If you can, please update your post with more details about specifically what is working and some example CSS so we can help you resolve your problem.
So I'm trying to make this small website responsive, but for some reason whenever I use media queries to set max and min width of a device it doesn't seem to follow it, what I mean is if I set a responsive design for iphone 5, then it will be for iphone 5 temporary, if i then try to do responsive design for Ipad, then the iphone 5 is ignored and now it follows Ipad's responsive design, can someone please help? here is my code(syntax... although its not a programming language lol :P
Source Code
/*Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
h1{
font-size: 24px;
text-align: center;
}
h2{
transform: translateX(40%);
margin-bottom: 15px;
}
h3{
font-size: 18px;
text-align: center;
margin-bottom:15px;
}
input[type=submit] {
width: 250px;
transform: translateX(10%);
}
.relocate{margin-top: -55px;}
.form .email{
width: 275px;
transform: translateX(8%);
}
.form select{
width: 275px;
transform: translateX(8%);
}
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px){
h1{
font-size: 24px;
text-align: center;
}
h2{
transform: translateX(47%);
margin-bottom: 15px;
}
h3{
font-size: 24px;
text-align: center;
margin-bottom:15px;
}
input[type=submit] {
width: 650px;
transform: translateX(10%);
}
.relocate{margin-top: -55px;}
.form .email{
width: 345px;
transform: translateX(8%);
}
.form select{
width: 325px;
transform: translateX(8%);
}
}
#media only screen and (max-device-width: 1024px){
h1{
font-size: 24px;
text-align: center;
}
h2{
transform: translateX(49%);
margin-bottom: 15px;
}
h3{
font-size: 24px;
text-align: center;
margin-bottom:15px;
}
input[type=submit] {
width: 800px;
transform: translateX(10%);
}
.relocate{margin-top: -55px;}
.form .email{
width: 460px;
transform: translateX(8%);
}
.form select{
width: 450px;
transform: translateX(8%);
}
}
/* Desktops and laptops ----------- */
#media only screen
and (min-device-width : 1025px)
and (max-device-width : 1140px){
h1{
font-size: 29px;
text-align: center;
}
h2{
transform: translateX(49%);
margin-bottom: 15px;
}
h3{
font-size: 24px;
text-align: center;
margin-bottom:15px;
}
input[type=submit] {
width: 800px;
transform: translateX(10%);
}
.relocate{margin-top: -55px;}
.form .email{
width: 460px;
transform: translateX(8%);
}
.form select{
width: 450px;
transform: translateX(8%);
}
}
/* iPhone 5 (portrait & landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
as a meta tag of your html website.
Without this meta tag the mobile browser doesn't know that the website is responsible and enters in a compatibility mode and this way the website doesn't follow media queries.
I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).
Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
Following is CSS code for all my web pages:
/* Site Colors:
#1A446C - blue grey
#689DC1 - light blue
#D4E6F4 - very light blue
#EEE4B9 - light tan
#8D0D19 - burgundy
*/
html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
font-size: 13px; line-height: 15px; }
img { border: none; }
table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;}
a { color: #8D0D19;}
#header { height: 70px; margin: 0px; padding: 0px; text-align: left;
background: #1A446C; color: #D4E6F4; }
#header h1 { padding: 1em; margin: 0px;}
#main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; }
#structure { height: 600px; width: 100%; }
#footer { height: 2em; margin: 0px; padding: 1em; text-align: center;
background: #1A446C; color: #D4E6F4; }
/* Navigation */
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }
/* Page Content */
#page { padding-left: 2em; vertical-align: top; background: #EEE4B9; }
#page h2 { color: #8D0D19; margin-top: 1em;}
#page h3 { color: #8D0D19; }
Problem is that once I have sufficient text to add to a web page, some part of the text goes out of bound and gets visible in white background(outside the light tan).Can anyone tell me necessary changes I need to make.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Use this code and customize won work