Website: ifnrussiacisforum.ru
It is 100% width on PC, but there's some empty space on mobile, likt this:
The code is:
HTML:
<div class="footer">
<div class="container">
<img src="images/logo-img.jpg" alt="beeboss" />
</div>
</div>
CSS:
.footer {
height: 60px;
width: 100%;
background: #000;
}
.footer .container {
width: 1003px;
margin: 0 auto;
}
.footer .container img {
margin:19px 0px 0px 20px;
}
Use this CSS code
CSS:
.footer .container {
width: 100%;
margin: 0 auto;
}
.footer .container img {
margin:19px 0px 0px 20px;
}
Solved the issue with this code:
html, body {
min-width: 1003px;
}
Weave: http://kodeweave.sourceforge.net/editor/#58fb912e2d456f902a77b8ebc76aa515
By default the body tag has a margin. You can fix that by either incorporating Normalize into your CSS or remove the margin in from your body.
EDIT: No wonder why your width was so grotesque you defined 800px and 1003px on most of your containers. Plus your CSS fairly very WET!
Change the following classes width to 100%
.footer .container
.main
.header
Then replace min-width/change your width from 800px && 1003px to 80% for the following classes.
.extra-bally
.request-form
.link
.plashka
.bally
.mac
Also focus on making your code more DRY.
body {
margin: 0;
}
.footer {
height: 60px;
width: 100%;
background: #000;
}
.footer .container {
width: 100%;
margin: 0 auto;
}
.footer .container img {
margin: 19px 0 0 20px;
}
<div class="footer">
<div class="container">
<img src="https://forums.gota.io/images/smilies/smile.png" alt="beeboss" />
</div>
</div>
Related
I would like a single column of images that scale to the viewport height, while retaining their aspect ratio.
I have a working demo: https://codepen.io/garethj/pen/qrjjvp
The problem I have is the links are not wrapping around the images, so the hitzones are too large (and will interfere with other UI elements ). Setting the a tags to display:block wrap the images, but kills the resizing.
Is there another way to approach this?
<section id="projects">
<img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" />
<h2>Project one</h2>
<img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" />
<h2>Project two</h2>
</section>
CSS:
html,
body,
#projects {
height: 100%;
margin: 0;
}
#projects {
margin: auto 5%;
text-align: center;
}
h2 {
margin: 20px 0 100px 0;
font-weight: normal;
font-size: 20px;
}
img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100% - 200px);
margin: 0px auto;
padding-top: 100px;
}
https://codepen.io/garethj/pen/qrjjvp
changed your display to inline, and your padding-top to margin-top.
img {
display: inline;
margin-top: 100px;
}
https://codepen.io/anon/pen/MpEdzV
does it not solve your issue ?
Something like this?
html,
body,
#projects {
height: 100%;
margin: 0;
}
#projects {
margin: 0 auto;
text-align: center;
width: 50%;
}
h2 {
margin: 20px 0 100px 0;
font-weight: normal;
font-size: 20px;
}
img {
display: flex;
width: auto;
height: 100vh;
max-width: 100%;
margin: 0px auto;
padding-top: 100px;
}
#media (max-width: 900px) {
img {
max-height: calc(100% - 0px);
padding-top: 0px;
}
h2 {margin-bottom:0px;}
}
/* demo stylin' */
body {
font-size: 24px;
font-family: arial;
font-weight: normal;
}
<section id="projects">
<img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" />
<h2>Project one</h2>
<img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" />
<h2>Project two</h2>
</section>
Try this.
Add a class to tag <a> to your css code a{display:inline-block;}.
Edit the class img{} with max-width:300px; width:100%.
Thw images will be displayed in max-width 300px but they will be resized if they needed it.
img {
display: block;
width: auto;
height: auto;
width: 100%;
max-height: calc(100% - 200px);
margin: 0px auto;
padding-top: 100px;
max-width:300px
}
a{display:inline-block;}
Let me know if works.
I have tried width 100% but it didn't make it responsive. Here is link of what I'm trying to make responsive. It is not responsive. Help codepen link
div {
background:url(https://i.stack.imgur.com/EinaJ.png) top center;
width:620px;
margin:auto;
padding:40px 40px 30px;
height:590px;
position:relative;
display:flex;
flex-flow:column;
justify-content:center;
}
img, p, footer {
padding:5px;
margin:0;
background:pink
}
img {
margin:auto auto 0;
}
footer {
bottom:30px;
right:45px;
margin:auto 0 0;
border-radius:0 0 0.25em 0.25em ;
background:rgba(0,0,0,0.2);
}
<div>
<img src="">
<p>here is</p>
<footer>footer</footer>
</div>
The reason this is not responsive is because you have set the div's width and height to a specific pixel. Therefore it is not able to adjust.
Try changing the pixel to a percentage:
For example:
width: 50%;
height: 100%;
:root {
/*the percentage of screen width occupied by a block. 1 = 100% */
--percent: .9;
}
div {
background: url(https://i.stack.imgur.com/EinaJ.png) top center;
background-size: cover;
/* for old browsers */
width: 90vw;
height: 113.61516034vw;
/* for new browsers */
width: calc(100vw*var(--percent));
height: calc((100vw*var(--percent))*866/686);
box-sizing: border-box;
margin: auto;
padding: 40px 40px 30px;
position: relative;
display: flex;
flex-flow: column;
justify-content: center;
}
img,
p,
footer {
padding: 5px;
margin: 0;
/* see me */
background: pink
}
img {
margin: auto auto 0;
}
footer {
bottom: 30px;
right: 45px;
margin: auto 0 0;
border-radius: 0 0 0.25em 0.25em;
/* see me */
background: rgba(0, 0, 0, 0.2);
}
body {
background: #777;
}
<div>
<img src="http://lorempixel.com/200/150" />
<p>here is</p>
<p>some line</p>
<p>of</p>
<p>text</p>
<footer>footer</footer>
</div>
I see what you're trying to do.You're trying to have the div in the middle center and responsive.Set margin:0 auto; and width:50%;.Get rid of other bits of codes in the div.To make it responsive to mobile screen do:
#media only screen and (max-width:set_your_max){
div { width:50%; }
}
Well, as it is shown on the screenshot I've linked below, there's a problem with centering this div containing two Tumblr posts columns. I want to have it centered in the part of the page, where no sidebar is given. Moreover, I would like to make posts in two columns following each other without any space. IMG: http://i.stack.imgur.com/VLkkr.jpg
CSS:
body {
margin: 0px;
background-color: antiquewhite;
text-align: center;
word-wrap: break-word;
}
body #content {
width: 900px;
display: inline-block;
margin: 15px 15px 15px 15px;
}
body #content #wrapper {
display: inline-block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
body #content #wrapper #posts {
display: inline-block;
background-color: white;
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
float: left;
text-align: left;
}
body .sidebar {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
body .sidebar .sidebar-inside {
display: table-cell;
max-width: 250px;
margin: 0 auto;
vertical-align: middle;
}
/* etc */
HTML:
<!-- These two columns -->
<div id='content'>
<div id='wrapper'>
{block:Posts}
<div id='posts'>
{block:Photo}
<!-- Here are posts. -->
</div>
{/block:Posts}
</div>
</div>
<!-- Sidebar -->
<div class='sidebar'>
<div class='sidebar-inside'>
</div>
</div>
Help me out, guys! Please!
Maybe a solution (for one thing) with CSS3 Column: (and do not use mulitple times the id atrribute.. use classes.. )
body #content #wrapper {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
-moz-column-gap:405px;
-webkit-column-gap:405px;
column-gap:405px;
}
body #content #wrapper #posts {
<strike>float: left;</strike> /*delete this one..*/
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
Edit: user ask for more..
the reason is that the sidebar is position:absolute; so it does not count in space available for centering..
place this just behind </div> from wrapper
<div class="Gh2"></div>
.Gh2 {
width: 250px; /*sidebar width*/
float: right; /*place it to the right where sidebar is*/
height: 1px; /*need some height..*/
}
than:
body #content {
/* width: 900px; deleted those unwanted settings*/
/* display: inline-block; deleted those unwanted settings*/
margin: 15px 15px 15px 15px;
}
I want to create a space above and below my header div, and so I gave it a margin-top and margin-bottom. The margin-bottom isn't adding a space on the bottom though. Instead, it's adding the margin-bottom to the top, and the content below is right against it.
This is literally all the code i have so far in my body:
<body>
<div class="header">
<img class="logo" src="Images/logo.png"/>
<ul class="navigation">
<li class="Twitter">
<a href="http://twitter.com/AccountLink">
<img src="Images/twitter.png"/>
</a>
</li>
</ul>
</div>
<div class="banner"><img src="Images/banner.jpg"/></div>
</body>
And my css:
ul {
list-style-type: none;
}
.header {
width: 800px;
margin: 0px auto;
margin-top: 25px;
margin-bottom: 25px;
}
.header .logo {
padding-top: 10px;
float: left;
}
.header .navigation {
float: right;
}
.header {
width: 800px;
margin: 25px auto;
overflow: hidden;
}
.banner {
display: inline-block;
margin: 25px auto;
width: 100%;
}
Compatibility table for browsers: http://caniuse.com/#feat=inline-block
You have floated navigation, yet your header does not have specified height. Use some element to clear after your navigation or apply overflow: hidden; to your header.
For example:
.header {
width: 800px;
margin: 25px auto;
overflow: hidden;
}
try using padding instead of margin
padding-top: 25px;
padding-bottom: 25px;
also add
.banner{ padding-top:10px;}
or adjust to your needs
Soooooo I'm making a sticky footer in Css. It doesn't work the way I want it to. The footer sticks to the bottom, but I also want 100% height for the page. This doesn't work, and I've tried a lot. Currently, the footer gets in the way of the container, and they overlap. If i give the container margin-bottom: 70px;, it creates extra unwanted space when the content is very small, making an unnecessary scrollbar.
Here's my code:
<html><head>
<style type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}
.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}
#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}
#footer div {
display: table-cell;
vertical-align: middle;
}
</style>
</head><body>
<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>
<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>
</body></html>
Also, this is not the actual site. Just testing to implement on real site.
I think that this is what you are looking for:
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */