My CSS isn't working on mobile portrait.
I want the main top menu to appear beneath the logo.
Here is my css at the mo:
#media screen and (max-width: 480px) {
#wrapper {
width:100%;
}
#logo {
margin-left: 100px;
}
#menu {
width:100%;
display:inline-block;
}
}
Hi now define your wraper width 100% into 480px as like this
#media screen and (max-width: 480px) {
#wrapper { width:480px; }
#logo {
margin-left: 100px;
}
#menu { width:100%;display:inline-block; }
}
Related
Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo
HTML:
<div></div>
CSS:
div
{
height:400px;
width:400px;
background-color:red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}
Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?
Media Query Syntax
A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.
If it resolves to true, the css code inside of it is applied.
#media not|only mediatype and (expressions) {
<stylesheet>
}
You must select the element- div in this case, inside the media query as of the following.
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}
div {
height: 400px;
width: 400px;
background-color: red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
<div></div>
You need to select the selector(div) inside media query.
try this:
#media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}
You didn't select the div in the second approach.
You may want to have this:
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
So I have an element that I want to change at 750px and 500px:
.footer-logo img {
content:url(...);
}
and then:
#media only screen and (max-width: 700px) {
.footer-logo img{
margin-top: -58px !important;
padding:64px;
}
}
#media only screen and (max-width: 500px) {
.footer-logo img {
width: 80vw !important;
max-width:none !important;
margin-top:-10px !important;
}
The 500px changes happen but the changes when testing at 700px do not happen. I know I shouldn't be using !important so much but the styling just won't happen without it... Any help is appreciated
You can Try This. please check div Color changes According to media query
HTML
<div class="footer-logo">
<img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
</div>
CSS
#media only screen and (max-width: 700px) {
.footer-logo > img{
margin-top: -58px !important;
padding:64px;
}
.footer-logo {
background-color:yellow;
}
}
#media only screen and (max-width: 500px) {
.footer-logo > img {
width: 80px !important;
max-width:none !important;
margin-top:-10px !important;
}
.footer-logo {
background-color:red;
}
}
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}
Here's the site: Website
There are some navigation arrows I'm trying to hide in mobile view.
Here's the HTML...
<div id="nav_arrow">
<img src="images/icons/arrow_left.png" width="60" height="44">
</div>
Here's the CSS...
#nav_arrow { display: none; }
The media query appears to be typed out correctly. The style works when the phone (iPhone 5) is held vertically. But, when I hold it in a landscape view, the arrows show up. I'm trying to not have them display unless the site is pulled up in tablet view or larger?
Any ideas?
Update 1
This is the section of CSS where I have the media query...
#media only screen and (max-width: 480px) {
#nav { display:none;}
#secondary-nav { display:none; }
#footer-social { float:left; }
.jcarousel-skin-tango .jcarousel-next-horizontal { right:0; }
.jcarousel-skin-tango .jcarousel-prev-horizontal { right: 43px;}
.jcarousel-skin-tango .jcarousel-item { width: 300px !important; }
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 20px;}
#latest-projects .block, #latest-posts .block, .programs .block { width:295px; height:inherit; }
#latest-projects .stack, #latest-posts .stack, .programs .stack { width:295px; height:274px; }
#latest-projects .block img, #latest-posts .block img, .programs .block img { width:283px; height:262px; }
#latest-projects .block .mask, #latest-posts .block .mask, .programs .block .mask { width:283px; height:261px; }
.nav-projects .viewall { display:none;}
#clients .block { width:298px;}
#clients .block img { width:298px;}
#info-block ul li > div { height: 85px; width: 270px; }
#latest-projects .block iframe, #latest-posts .block iframe, .programs .block iframe { width:283px; height:262px; }
.fix-fish-menu select { display:block; }
#menu { float: none; }
#clients .columns { padding-bottom:20px; }
.ribbon-front { left: 1px; }
.ribbon-edge-topleft, .ribbon-edge-bottomleft { display:none; }
#footer-social li { margin-right: 5px; margin-left: 0px; }
#top-panel .columns { margin-bottom:20px;}
#contacts-form input[type=text], #contacts-form input[type=password], #contacts-form input[type=email] { width:130px;}
#contacts-form textarea { width: 290px; }
#contact-info li { width:275px; }
#latest-posts .mejs-container {width:265px !important;}
#latest-posts .block .text { height: 200px;}
#latest-posts .block { width:295px; height:274px; }
#nav_arrow { display: none; }
.link-icon { background-position: top: 100px; right: 100px; bottom: 100px; left: 60px; }
The specific tag is on the bottom. Second to last.
Screen in media queries are defined as anything on an screen, so not print, or other similar medias. Your media query is saying that those styles will only be displayed on a screen, and the screen has to be less than 480 pixels.
Chances are that when you tilt your iPhone to landscape, it increases the pixels past 480. So then all of those styles in that block are not applied, and the iPhone renders the default styles of screens bigger than 480 pixels. There are a few ways to solve this.
You could increase the max-width pixel value. This might be the solution you will have to go to. You will just have to be careful picking a value
You don't want it too low. If you only target iPhone for this value, then any phones with a bigger screen won't have those styles. So you'd be back to the same problem
You don't want it too high, because you might end up accidentally targeting some smaller screen notebooks, and then you have destroyed a little part of your UI
Chris posted a good article relating to this. He has a lot of media queries you could use to solve this. But that might get a little heavy with queries.
Unfortunately, there isn't a query made yet that only targets handheld devices
Are you sure you are using the right mediaquery?, have you tried the orientation property:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
or maybe device-aspect-ratio would be more accurate for iphone 5:
#media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) {}
The width of the iphone5 landscape is 568px, so change your media query to something like:
#media only screen and (max-width: 568px).
Maybe use 768 as a breakpoint for tablets (portrait).