There is a media query that flips the screen when landscape mode is detected (to somehow force portrait mode) for that I'm using this:
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape)
I'm working on a mobile version of a web page (that contains the contact form 7 plugin) with this query:
#media only screen and (max-width: 500px)
So when I see it on a mobile device it looks like this (good enough for now)
But when I click on a text field the "screen" flips and look like this and I don't know why. Please help me.
Relevant code:
HTML
<div id="div-mail">
[contact-form-7 id="95" title="formulario de contacto"]
</div>
CSS
#div-mail {
position: relative;
right: -35px !important;
bottom: 270px !important;
max-width: 80%;
z-index:2;
top: -365px;
}
Contact form 7 text fields CSS
#contact-email {
max-width: 65% !important;
}
#contact-textarea {
max-width: 70% !important;
}
Related
I am including two picture of the same section to illustrate what's happening on the website when I drag the screen to a smaller size. I am hoping to use the media queries to prevent such a thing from happening. Dragging the screen size smaller is changing the text and the size of the elements pictured. When I input the media queries into custom css, I see nothing change and my goal is to have the screen size look very similar across all screen sizes that use the website.
Before dragging screen to smaller size:
enter image description here
After dragging screen to smaller size:
enter image description here
/*For browser/screen widths less than 768px*/
#media screen and (max-width: 1440px) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-height: 900px){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 900px) and (orientation: portrait) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 1440px) and (orientation: landscape){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
I've tried multiple css media query styles and I have not seen any changes to any pages of the website. Please help me to assess what I am doing wrong. I am exploring all options to make this website responsive. The divi builder only provides three options, desktop, tablet and mobile for screen sizing. I need more screens recognised which is why I am using custom css for this project. I have noticed especially on macbook air that the screen size is having multiple issues accommodating the size of elements on each page. Some images are cutoff on pages and some are turning into different weird sizes that were not intended to do so.
Thanks in advance!
I am having trouble with my responsive design on my iPhone 6. On the desktop, the css works, media query seems like its correct, but when I put it onto the server and actually test it on my phone, its as if nothing happened.
I've already used the meta tag and that helped it go into phone layout, but the text, img and button are all out of place.
My CSS:
#media only screen and (max-width: 308px) and (orientation: portrait) {
.jumbotron h2 {
bottom: 3em;
}
.jumbotron img {
bottom: -5em;
}
.jumbotron button {
bottom: -1em;
}
}
max-width: 308px
is too small
you can follow bootstrap size on phone
Phones (<768px)
so that you should change to
max-width:768px;
When I rotate the phone to landscape view, I still want to see the web page in portrait view. It is possible to force this only with CSS?
This could lower the UX tremendously, seeing as the viewport is now only half the height. In most cases it makes more sense to simply make the landscape-view more userfriendly (though it's rarely gonna be as nice as portrait!).
To answer your question, though:
Using media queries you could use the orientation media property and make your container width equal to the viewport height.
Something like the following:
#media (max-width: 768px) and (orientation: landscape) {
#container-div {
width: 100vh;
}
}
Its also easy to re-rotate using css..
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
body {
-webkit-transform: rotate(-90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
But as mentioned in the other answer... it is a better to make a more userfriendly layout for landscape view as well...
I'm trying to make my website somewhat responsive by using media queries however they don't seem to be working.
Here is what it is supposed to look liked:
http://mobt.me/3tPS
And here is the actual website:
http://sandbox.rdonohue.ca/
But when I pull up the actual website on my phone I see the full website except the websites name is centered. I searched for the media query for iPhone 5 so I could see what it looks like but like I said it doesn't appear to be working.
Here is my CSS:
#media only screen and (min-device-width : 320px){
.titleName {
text-align: center;
padding-left: 0px;
}
.landingImage {
height: 200px
}
.mainContentTitle {
text-align: center;
width: 100%;
}
.mainContentTitle h5 {
padding-left: 10%;
}
.mainContentSnippet {
width: 90%;
}
}
Ryan
Here is the iPhone5 media query:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
You may also need to target the pixel density as well for retina screens:
-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2
Also double check that there is no css after the media query that would override it.
I am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.