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;
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!
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;
}
Many questions on this but.. when I use this css code. It works on the devices and not when I resize the browser.. But if I change my css to "min-width" instead of "min-device-width" does not work at all... neither at my browser nor my phone device.. Any thoughts? Thanks
#media only screen and (min-device-width: 768px) and (max-device-width:1000px) {
.footericons {margin-left: 37%;}
.logo img {margin-top:-15px; width: 120px;margin-left:-55px;}
.welcome {margin-top:-20px;}
}
no need putting only just "#media screen", also just use min-width and max-width...
#media screen and(min-width: 768px) and (max-width:1000px)
This should work. If it doesn't, show us the rest of the CSS or SCSS please.
#media only screen and (min-width: 768px) and (max-width: 1000px) {
.footericons {
margin-left: 37%;
}
.logo img {
margin-top:-15px;
width: 120px;
margin-left:-55px;
}
.welcome {
margin-top:-20px;
}
}
When using min-device-width and max-device-width you check not by resizing browser window but your browser developer tool.
For Chrome it is Device Toolbar, shortcut Ctrl+Shift+M
For Firefox it is Responsive Design Mode, shortcut Ctrl+Shift+M
Change your queries to use min-width & max-width and it will then work with browser resize and also with developer tools (Device Toolbar, Responsive Design Mode).
You can check this tutorial this - CSS Media Queries tutorial for creating a responsive website design.
I'm designing a responsive website and after change my cellphone orientation from portrait to landscape and then to portrait the CSS stop working.
Initially the css that I apply to the the 320-480 resolution loads very well in my portrait screen and also in the landscape but when I change it back to portrait the css stop working, is like is not loading the css.
What's the problem????
When using css media queries it is unnecessary to assign a min width, you can use simply max width and have multiple queries if you want the layout to change at a different point. I can't explain why your css works initially but then changes when you turn the screen a couple times but here is some good css media query practice and syntax that could solve your problem:
#media only screen and (max-width: 320px){
/*Some css styling for widths below 320 pixels*/
}
#media only screen and (max-width: 480px){
/*Some css styling for widths below 480 pixels.
Keep in mind that this css will only be applied for viewports between 320
pixels and 480 pixels*/
}
It is not necessary to use device-width when you can simply use width. Also the 'only screen and()' is good practice for detecting mobile viewport widths in css. I hope that this helps and your problem is solved.
The css
#media all and (min-device-width: 320px) and (max-device-width: 480px){
#reviews{
display: none !important;
}
.footer {
border: 1px solid #CCCCCC !important;
}
ul,ol{
margin-left: 0px!important;
}
.bottom-menu ul{
margin-left: 25px !important;
}
#side-quote{
display: none;
}
#export-dption{
float: bottom;
}
#export-request{
float: top;
}
.panoramic-pic{
padding: 0px !important;
}
#googleMap{
display: none;
}
.quote-index{
width: 100% !important;
background: red !important;
}
}
and the cellphone is a LG Optimus F3 and the browser is chrome.
as you can see in the selector .quote-index is set the background to red, initially it loads in red when the phone is in portrait mode but when i change it to landscape an then back to portrait is like that selector doens't exits.
Can someone take a look at my website and help me fix how a section looks while viewed on a mobile device. The "Thousands of Canadians" and "Mobile Search" sections on the homepage are not responsive like the rest of the page. Any help would be greatly appreciated.
Below is the CSS i have inserted so far:
#media all and (max-width: 640px){
#site > .wrapper, #footer > .wrapper {
margin: 0;
padding: 40px;
width: auto;
}
}
www.jobspark.ca
I don't think you are targeting the right part, if you look at the columns those are in, there are .myLeftColumn and .myRightColumn divs that have the original percentage widths. Try changing both of those to 100% width when the screen is smaller than 640px or whenever you need a breakpoint.
#media all and (max-width: 640px) {
.sqs-block-content .myLeftColumn,
.sqs-block-content .myRightColumn {
width: 100%;
}
}