I have had this problem for a while. Everything I have done to make my images responsive and contain in the parent element fails. My images get cutoff, they do not center, and zoom to smaller screens. Also, my homepage has a left margin space I can't seem to fix. I would like my content centered, and zoomed properly on small screens. My full sized background image is also not filling the whole background on smaller screens. Any help would be appreciated.
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('span.nav-btn').on('click', function(){
$('#menu').toggle();
})
$(window).resize(function(){
if ( $(window).width() > 768 ) {
$('#navigation.showing').removeAttr('nav-btn');
}
});
});//end ready
</script>
</head>
<body>
<div class="bg">
<div id="container" class="homepage">
<div id="header">
<p align="center"><img src="images/headerlogo.png" alt="Lost Tourist Logo"
width="517" height="269"/> </p>
</div>
<div id="navigation">
<span class="nav-btn"></span>
<ul id="menu" class="showing">
<li> <a href="index.html"><img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">Home</p></li>
<li><a href="beers.html"> <img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">The Brews</p></li>
<li><a href="events.html"> <img src="images/menubar.png" alt="menu bar icon"
width="122" height="118"/></a>
<p align="center">Events</p></li>
<li> <a href="crew.html"><img src="images/Crew.png" alt="crew" width="122"
height="118"/></a>
<p align="center">Crew</p></li>
<li> <a href="contact.html"><img src="images/Payphone_menubar.png"
alt="contact" width="122" height="118"/></a>
<p align="center">Contact</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image:url(images/CityScape.jpg);
height:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#container {
height: 900px;
width: 900px;
position: relative;
padding-bottom: 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
}
#navigation ul li {
margin: 25px;
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
}
#navigation ul li p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
color: #000;
margin: 5px;
}
#content {
position: relative;
overflow: hidden;
clear: both;
width: 900px;
height: auto;
background-color: #09F;
border: thin solid #000;
padding-bottom: 0px;
margin-bottom: 25px;
}
#content table {
background-repeat: repeat;
background-color: #06F;
width:550px;
}
#content table p {
text-align: inherit;
display: table-row;
vertical-align: middle;
}
#content img {
position: relative;
}
#content h1 {
padding: 5px;
}
#navigation {
clear: both;
height: auto;
width: auto;
margin: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
margin: 5px;
}
#footer p {
margin: 5px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
clear: both;
margin-bottom: 25px;
margin-top: 15px;
border: thin solid #000;
background-color: #09F;
}
#header img {
padding: 25px;
}
My CSS for small screens:
/*smart phones*/
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
body, html {
height: 100%;
marging 0;
}
.bg {
background-image:url(images/CityScape.jpg);
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:cover;
min-width:100%;
}
#container {
width: 100%;
height: 100%;
margin: auto;
padding:5px;
margin:0px;
}
#header img {
position: relative;
height: auto;
max-width: 100%;
max-height:100%;
overflow: hidden;
}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
margin:auto;
padding:10px;
}
#navigation ul {
padding: 0;
text-align:center;
}
#menu {
float:none;
margin:auto;
display:none;
width:100%;
max-width:360px;
position:relative;
list-style-type:none;
padding:0;
text-align:center;
}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);
}
#menu li {
width:100%;
font-size:large;
font-weight:bold;
background-color:#09F;
display:inline-block;
margin:0px;
border:#000 medium solid;
float:none;
overflow:hidden;
text-align:center;
vertical-align:top;
}
#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;
}
#navigation ul li {
margin: 0px;
width: 100%;
position: relative;
float: none;
overflow: hidden;
}
#menu li a {
width:100%;
display:block;
}
#content {
width:100%;
height:100%;
margin:auto;
padding:10px;
}
#content background img {
max-height:100%;
max-width:100%;
}
.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;
}
.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}
.mail {
max-height:110px;
max-width:110px;
}
#content img {
height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}
#content table, tbody, th, td, tr {
display:block;
width:100%;
height:auto;
min-height:100%;
min-width:100%;
}
#content table {
border-collapse: collapse;
width:auto
height: auto;
padding: 10px;
position: relative;
min-width:100%;
}
#content td {
min-width:100%;
min-height:100%;
display:inline-block;
margin:5px;
padding:5px;
position:relative;
width:auto;
}
#content table p {
display:block;
text-align:inherit;
vertical-align:middle;
max-width:100%;
}
#footer {
width:100%;
height:100%;
}
first, add a basic box-sizing property
*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
2) remove margin from #container
3) remove margin from body
4)for responcive img use img{max-width: 100%;height: auto;}
Related
body{
font-family: sans-serif;
font-size: 15px;
}
.main{
background-color: pink;
width:80%;
float:left;
max-width: 53em;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
article{
padding: 3em;
}
nav a{
display: block;
color: black;
text-decoration: none;
padding: .3em;
background-color: gold;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
nav a:hover{
background-color: pink;
}
nav{
margin:0;
width:20%;
float: left;
overflow:hidden;
}
.container{
max-width: 60%;
margin: 2em auto;
}
figure{
margin:0;
}
article img{
width:100%;
}
#media only screen and (max-width: 66em){
.container{
width:90%;
}
}
#media only screen and (max-width: 53em){
nav{
float:none;
width: 100%;
}
nav a{
float:left;
width: 20%;
padding: 1em;
text-align: center;
}
.main{
float: none;
width:100%;
}
}
#media only screen and (max-width: 32em){
.container{
width:100%;
margin:0;
}
article{
padding: 1em;
}
}
#media only screen and (max-width: 20em){
body{
margin:0;
padding: 0;
}
nav a{
float:none;
width: auto;
padding: 0.3em;
}
}
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>Responsive design</title>
</head>
<body>
<div class='container'>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</nav>
</div>
</body>
I am writing because my media queries doesn't work. Actually, classes and id's don't work. What could I do? This code is only exercise, but I want to know, why it isn't working. On the top and bottom are tags html and DOCTYPE html, but it doesn't matter. I wrote this right. The same with the rest of body.
I do not have enough reputation to comment on posts yet, but I can see why you are not getting the expected result once you set .container to 100% in 32em media query. It is because you have .container max-width set up to 60%. Try adding max-width:100%, like below:
#media only screen and (max-width: 32em){
.container{
width: 100%;
margin: 0;
max-width: 100%;
}
article{
padding: 1em;
}
}
So I have some wierd spacing at the bottom of the footer and im not sure whats causing it. the code is as follows:
scss:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding:10px;
background:#EFDECD; //#5ee;
// text-align: center;
}
#content {
padding:10px;
// padding-bottom:80px; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headtext{
display:inline-block;
font-size:3em;
margin-left: 1.5em;
text-align: center;
font-family:"Courier New";
font-weight: bold;
margin-left: 6em;
margin-right: 7em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
The site is in development and is at www.new.omegadesignla.com please inspect element to view and can also view source code there.
The problem comes from the <br> which is between <div id="wrapper">...</div> and <footer>...</footer>.
If you eliminate position:absolute from your footer rule, the white space below footer will disappear. Is there a specific reason you are using position:absolute?
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.
Got a weird problem,i.e,Layout of webpage breaks on resize of the browser/when accessed through mobile device/when switched to lower resolution ( 800*600 / 1024*768 )
Temporary link : http://krishnaspirit.hostoi.com/
P.S : Its a full-width website & Works fine on 1366*768.
CSS :
* { padding:0px; margin:0px; }
p,h1,h2,h3,h4,h5,h6,a{ font-family: 'Armata', sans-serif; }
/*header*/
.header { z-index:5000; position:fixed; top:0px; width:100%; min-width:960px; height:100px; background-color:#4E4E56;}
.header #nav li:last-child { margin-right:0px; }
.header #nav li { transition:1s ease all;line-height:40px;
display:inline-block; margin-right:3px; width:116px; height:40px;text-align:center; border-radius:5px;}
.header #nav li a { font-size:15px; color:#DCD0C0; display:block; height:100%; text-decoration:none; }
.header #nav li:hover { background-color: #DA635D; }
.header #nav li a:hover { color:#fff; }
.header #nav { position:absolute; right:10px; top:35px; width:600px; }
.current {background-color: #DA635D; cursor:none;}
.header #nav .current a { color:#fff; }
.header .logo img {width:100px; height:95px; position:absolute; top:5px; left:12px; line-height:100px; font-size:40px; color:#fff;}
.header .logo .name { font-size:40px; color:#ccc;
font-family: 'Armata', sans-serif; position:absolute; left:110px;top:29px; }
/*sub-head*/
.sub-header .top-logo { float:left; }
.sub-header .top-name { float:right; font-size:30px; padding-top:120px; color:#003366; }
.sub-header { width:85%; text-align:center; margin:150px auto; }
/*main-body*/
.content { float:left; }
.news { float:right; margin-right:5px; }
.news { box-shadow:3px 3px 5px #ccc; padding:0px; border-radius:3px; }
.news p { font-weight:bold; font-size:15px; padding-bottom:20px;}
.news { border:1px solid #ccc; width:27%; min-width:27%; padding:5px; height:300px;}
.news .news_body { padding:3px; text-align:center;}
.content { box-shadow:3px 3px 5px 0px #ccc; width:70%; height:300px; border-radius:3px; margin-left:5px; border:1px solid #ccc; font-size:15px; padding:5px;}
.content .sub-main { margin-top:15px; text-align:justify; padding:10px; }
.content #myMenu { width:100%; text-align:center; height:30px; }
.content #myMenu{ list-style-type:none; }
.content #myMenu li { border-bottom:1px solid #ccc; color:#999; display:inline-block; width:30%; line-height:30px;}
.content #myMenu li:hover { font-weight:bold; }
.content #myMenu li a { display:block; width:100%; }
.content #myMenu li a:hover { border-bottom:5px solid #DA635D; color:#DA635D; cursor:pointer;}
.body_wrapper { margin-bottom:500px; margin-top:70px; background-color:#ccc; }
/*footer*/
footer { width:100%; height:50px; line-height:50px; background-color:#4E4E56; }
footer p a{ color:#DA635D; text-decoration:none; font-weight:bold;}
This is not a weird problem. You need to use #media query to fix the problem.
The image on left side is large enough to occupy almost half of total screen width at a resolution 1024x768. You need to define style sheet on different screens using media query.
Example -
#media screen and (max-width: 1024px){
.main .sub-header .top-logo{
width: 250px;
}
.main .sub-header .top-logo img{
width: 100%;
}
}
This snippet will only take action in device screen width less than or equal to 1024px.
As you can see, for this type of device resolution I have reduced the width of .top-logo to make sure it can fit properly in small screen. You need to define .top-name and other elements accordingly to fit them properly for different device width. Hope you get the idea.
Another thing causing this problem is when one #media query has a missing closing brace }.
For example if your CSS has something like:
nav {
position: relative;
width: 95%;
margin: 10px auto 0 auto;
height: auto;
background-color: var(--magnolia);
font-family: Roboto;
}
#media screen and (min-width: 860px) {
nav {
margin: 0 auto;
}
<----------------- /* A closing brace "}" is missing here ! */
.navbar {
display: flex;
list-style-type: none;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
align-items: center;
margin: 0 auto;
padding: 0;
height: auto;
}
etc.
etc.
This makes all CSS below it revert to default, e.g. width: 100%.
Overflow abounds in such a situation.
Since W3C CSS Validator may not detect this, you have to closely read through all #media queries before the breaking elements looking for missing closing braces. Just one of these can screw up everything below that part of the web page. Fix it and everything is suddenly fine.
I am trying to make a static header that stays floating at the top. the background is also static,
somehow the background seems to hide the header and show in front of the header.
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#mainframe{
color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#right{
float:right;
width: 479px;
}
#left{
float:left;
}
#footer{
text-align: right;
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
padding-right: 50px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #F00;
padding-top: 10px;
font-size: 10px;
padding-bottom: 10px;
background-image: url(images/bartrans.png);
text-transform: none;
text-decoration: none;
}
#txt{
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
margin-top: 10px;
font-size: 12px;
}
a {
text-decoration: none;
color:#FFF;
}
#header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border: 1px dotted #F00;
margin-top: 20px;
}
#headercontent {
background-color: #F00;
width: 900px;
margin-right: auto;
margin-left: auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />
</div>
</div>
<div id="page-background"><img src="images/Music_Equalizer_by_Merlin2525.png" width="100%" height="100%" alt="Smile"></div>
Am I missing something here?
You just need to add z-index: 10; to the #header css rule and z-index: 0; to #page-background rule. You can see my Fiddle here.
I wouldn't set the #page-background to position: fixed;
You can set the background-image or whatever you are using to background-attachment: fixed;, so then, when you set the header element to position: fixed; they won't clash. I wish we had more to work from, like a link to the page you are working on.
It's hard to create a test environment for you without the assets you are using.
Also, another thing I see as an issue is that you are using a DIV element to set the background image.
Apply the background image to the BODY element and you won't have to worry about any of this.
See a JSFiddle here to see the code I was working with: http://jsfiddle.net/mikelegacy/5P7TN/
Notice that I have removed the #page-background ID and used the BODY element to apply the background image. You shouldn't apply full page background images with DIVs, that's not semantic.
Here is the code exactly how you should copy/paste it in your editor:
<html>
<head>
<style type="text/css">
html, body {
height:200%;
margin:0;
padding:0;}
body {
background-image: url(images/Music_Equalizer_by_Merlin2525.png);
background-attachment: fixed;
background-position: 0 0;
background-repeat: repeat; }
#content {
position:relative;
z-index:1;
padding:10px;}
#mainframe{
color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#right{
float:right;
width: 479px;
}
#left{
float:left;
}
#footer{
text-align: right;
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
padding-right: 50px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #F00;
padding-top: 10px;
font-size: 10px;
padding-bottom: 10px;
background-image: url(images/bartrans.png);
text-transform: none;
text-decoration: none;
}
#txt{
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
margin-top: 10px;
font-size: 12px;
}
a {
text-decoration: none;
color:#FFF;
}
#header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border: 1px dotted #F00;
margin-top: 20px;
}
#headercontent {
background-color: #F00;
width: 900px;
margin-right: auto;
margin-left: auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />
</div>
</div>
</body>
​Here is that article for full screen background images: http://css-tricks.com/perfect-full-page-background-image/
Some of the methods here use and IMG tag to set the background image. Not exactly semantic, but it's a hack for older browsers. If you could, I would recommend just using background-size: cover;