I've been working on a theme for the site http://silversoundz.com and have it looking just how my client wants it on browsers but the problem comes when I shrink the screen to check the site on mobiles, in particular the Iphone.
It seems like there's a minimum threshold (around 768px width) before the header+icon svg files go back to their enormous default dimensions thus rendering everything else tiny in relation to that. I've changed the icons to smaller pngs but I'm not sure what the best course of action is for resolving the header scaling/sizing so everything is proportional on a small screen.
Here's the problematic css
media="all"
#media only screen and (min-width: 768px)
.logo-img {
width: 100%;
float: left;
margin: 0;
position: inherit;
}
Ok I figured it out:
Basically I just had to find the relevant bit of css which was only kicking in for screens > 768 and re-paste it below the general styles which says:
body {
font-family: "Open Sans", sans-serif;
font-size: 1.0em;
color: #000000;
background: #ffffff;
font-weight: 400;
min-height: 100%;
}
.wrap {
width: 96%;
margin: 0 auto;
}
so it would come into affect for the general styles too.
Related
I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as:
# media (max-width: 700px)
body { background-color: #fff; }
I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px)
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in
documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information... </p>
</div>
It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Snippet
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p>More information...
</p>
</div>
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)
You will see that the bottom part is still grey. If you put in the background-color part it will be white.
To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed.
So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.
At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!
I often float images either left or right around text on desktop but I want them centered for small mobile devices and the paragraph to drop below the image using Responsive design. I've got the paragraph dropping below the image using an online mobile viewing device but not when I try to view it via my computer. The image won't center online or on my computer.
Here is what I have found after many hours of research:
I have this set up for all images:
img{
border:0;
max-width:100%;
height:auto;
}
I have this set up for all paragraphs: it pushes the paragraph down below a floated image when the width of the paragraph is less than 10em (about 200 px).
p:before{
content: "";
width: 10em;
display: block;
overflow: hidden;
}
I have applied the following for images to media queries less than 320 and max of 480:
img{
max-width:100%;
display:block!important;
margin:0 auto !important;
float:none !important;
}
(i had to add !important to some of them or they wouldn't take but it's still not accepting margin: 0 auto; )
Can anyone see what I'm doing wrong?
Here you have a working update of what you need: http://jsfiddle.net/ancpjmet/3/
I changed min-devide-width to min-width and max-devide-width to max-width to be able to see the changes on my desktop browser in Google Chrome.
You have to set the div wrapping the img to float: none;, not the img:
#media only screen and (min-width:320px) and (max-width:480px) {
#image-wrapper{
float: none !important;
}
#image-wrapper img{
max-width: 80%;
display: block;
margin: 0 auto;
}
}
I also rebuild your .clearfix class to be more consistant and work in all browsers:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Take a look at the changes in the jsfiddle given.
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I've spent an entire day struggling with an issue that has occurred with mobile devices such as iPhones, iPads and an Acer tablet. I haven't been able to check with other devices but the problem seems to be quite universal when it comes to mobile devices.
Here are the first three css elements I use:
* {
margin: 0;
padding: 0;
}
html, body {
background: #f1f1f1;
margin: 0;
padding: 0;
}
#page-wrap {
background: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
The point here being that I have a bunch of 1200 pixel-wide <div> elements with content placed inside other, browser-wide elements. So, first, I use css to make my site use all of the browser window and then add <div> elements like this one and center them:
#featured {
background: #282828;
width: 100%;
height: auto;
padding: 0;
}
#featured #inside {
background: #282828 repeat;
width: 1200px;
height: auto;
margin: 0 auto;
padding: 50px 0 50px 0;
}
And here's the issue:
I'm currently using this code to define a fixed position background image for a <div> element:
#banner_index {
background: url(../images/banner/index.jpg) no-repeat center center fixed;
-webkit-background-size: 2000px 1333px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 600px;
margin: 0 auto;
padding: 0;
}
While this makes the background look perfectly fine on all the necessary desktop browsers, all the forementioned mobile devices (regardless of the browser app used) display the background image smaller, ie. not completely stretched out to fill the <div> element.
More to my demise, I've created a header <div> for the site above the #banner_index element, which has a top border of 3 pixels. Here's the code for that one:
#header {
background: #f1f1f1;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 0 20px 0;
border-top: solid #282828 3px;
}
Much to my surprise, this border, and in fact the whole <div> seems to be sliced to the same width as the background image on the #banner_index element right below it.
I realize that mobile devices have problems with the fixed code in the background: element but all the workarounds I've managed to find seem to be of no use. Especially when the border-top: element has nothing to do with background images.
Anyone care to help a frustrated enthusiast out?
I'd like to keep my site Javascript-free and thought maybe a more simple css solution is out there.
Therein lies the rub.
Currently, I am using width: 100% to make my image scale with the window size.
I would like to know how I can make the image scale down and not become distorted.
I simply changed the image width too width: 100% and changed height to height:auto to fix this for anyone that might need to know.
eg.
img {
width: 100%;
height:auto;
}
EDIT:
To ensure image widths don't go larger than their containers
img {
max-width: 100%;
width: 100%;
height:auto;
}
I did this and it worked out for me. I did not want the big slider on the homepage so i resized it, then i found out it was not responsive anymore. I added some codes and tested it, some did not work, some did. Finally this is the code to and resize the slider, and keep it responsive!!
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
display: block;
max-width: 100%; height: auto; margin: - auto;
}
}