So far all of my media queries are fine, except this one. I have an actual iPad and I am using a simulator as well as my client doesn't like his logo resting against the edge of the screen, so all I'm trying to do is either give it a bit of padding or a margin (padding didn't work either). I figure another pair of eyes wouldn't hurt - am I missing something here??
#media screen only and (min-width:768px) and (max-width: 1024px) {
.site-header .home-link {
margin: 0 20px!important;
}
}
.site-header .home-link {
background: url(http://client.savorweb.com/INWS/wp-content/uploads/2015/04/iwns-logo.png) left no-repeat;
color: #141412;
display: block;
margin: 0 auto;
max-width: 1024px;
min-height: 150px;
padding: 0px 5px 0px 10px;
text-decoration: none;
width: 100%;
}
Your media query is malformed. It should be:
#media only screen and (min-width:768px) and (max-width: 1024px)
With emphasis on only screen instead of screen only.
Related
On 320×480 on mobile, my background image, and the word it contains, fits perfectly to the screen. As soon as I look at it on a mobile with 320×568, the images gets slightly bigger and the end of the word gets chopped off the screen. Any size above 320×480 on mobile, the image is slightly too big.
I used this css to change the button layout, and it worked, except that the background image still gets slightly bigger above 320×480.
#media (max-width: 768px) {
.btn {
display: inline-block;
height: 40px;
font-size: 12px;
width: 145px;
min-width: 80px;
padding: 0;margin-top: 180px; text-align: center; content:
center; line-height: 38px;
It's just the background image on the front page which I'm concerned about.
I tried:
#media (max-width: 768px) { body
{background-image: contain;
}}
#media (max-width: 768px) {img {max-width: 100%;
height: auto;}}
Didn't work.
Tried:
#media (max-width: 768px) { body
{background-size: contain;
}}
#media (max-width: 768px) {img {background-size:
contain;}}
Doesn't work.
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
Use default Blogger template, named Simple. That because let me edit more template. But responsive design is poor. Only on mobile small screen the text can be readable easy. I tried to add media-queries, but I'm not experience in CSS. Below you have code that I tried apply, but unsuccessfully.
EDIT:
We have succeeded add some code that works pretty well. I need your help to improve code already published by me, but also to add sidebar to adjust or may not display.
For sidebar, class was that: fauxcolumn.
My template code is here: http://hostcode.sourceforge.net/view/3075
/**************************************************************************/
/*********************RESPONSIVE MEDIA-QUERIES*****************************/
/**************************************************************************/
/* Laptops and Desktops */
#media (min-width : 1025px) and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
}
/* Tablets (Landscape) */
#media (min-width : 769px) and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -25% !important;
width: auto;
text-align: left;
padding-right: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 0px !important;
width: 75%;
text-align: left;
padding-left: 0px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
}
/* Tablets (Portrait) */
#media (min-width : 641px) and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -35% !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 25px !important;
width: 60%;
text-align: left;
padding-left: 0px;
}
}
/* iPhones */
#media (min-width : 481px) and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
body {
position: relative;
aling:center;
margin: 0 0px 0 -300px !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 200px 0 0px !important;
width: 55%;
text-align: left;
padding-left: 0px;
}
}
/* Mobiles */
#media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
}
/* Small Mobiles */
#media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
}
/**************************************************************************/
/*****************************END RESPONSIVE*******************************/
/**************************************************************************/
Thanks a lot for any help!
Blogger has a responsive template called "Contempo" which has media queries already in place. You might want to give it a try. I am using it in my travel blog. The SEO is broken (like in most of the blogger templates), but I fixed those issues as well and you can get the fixes from my GitHub (sorry, no links, you have to dig them out by yourself as some "experts" here are editing posts removing all links).
I have the following media queries:
#media only screen and (max-width : 320px){
.jumbotron-startup{
min-height: 100vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
}
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jumbotron-what-is-switchhon{
min-height: 100vh;
height: auto;
}
.space-top{
margin-top: 0;
}
.jumbotron-what-is-switchhon p{
font-size: 1.2em;
text-align: center !important;
}
.jumbotron-startup img{
height: 64px;
}
.jumbotron-startup p{
font-size: 1.1em;
}
}
For some reason, these media queries, some of their classes are applying to the page on any environment, that means even if the resolution is 1920x1080 from my current monitor in my desktop computer.
I have no idea why this is happening, as it has never happened before. Anyone has any idea as to why they are acting out of context?
Outside of the media queries I'll just put some of the classes I have that for some reason, they are being overwritten:
.startup-card{
background-color: rgba(255, 255, 255, 0.6);
color: #333;
height: 300px;
border-radius: 5px;
}
.startup-card h2{
padding-top: 20px;
}
.startup-card p{
padding: 10px;
text-align: left;
font-size: 1.1em;
}
.startup-card img{
padding-top: 20px;
width: auto;
height: 90px;
}
Just to make sure we're on the same page, these media queries are at the bottom of my stylesheet, like many experts recommend, since sometimes funny things may happen if put somewhere else other than on the bottom.
EDIT
Here's a PEN for you to take a look at it. http://codepen.io/yisera/pen/xdGKh
*****UPDATE******
After commenting the media queries to see where the problem is, I found that all media queries work correctly except this one:
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
I can't figure out why, it has the correct syntax and everything, everything closes correctly, it's driving me nuts
Move all your media queries at the bottom of your CSS. Otherwise the styles you have written inside the media queries will overwritten with the normal styles.
EDIT:
As OP asked in chat, "Do you know how can I elaborate a media query to target just the landscape of a mobile phone?"
/* #### Mobile Phones Portrait #### */
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }