i'm trying to build a responsiv webpage and it works on small screen up to 640px and on bigger screens. there are two elements next to each other.
The problem is between the breakpoint 640 px and up to bigger screens. Until you've stretched out to bigger screen the two elements floats in to each other. Like between maybe 640 px and up to 800 px..
Here's the css where the two elemets is placed next to each other.
#media screen and (min-width: 640px) {
article {
max-width: 75%;
position: absolute;
margin-right: 2em;
}
aside {
float: right;
display: inline;
max-width: 20%;
}
How can i get them to not float in to each other?
Your position: absolute is creating the problem. Not sure why you need it.
Are you looking for something this below
HTML:
<div class="left"></div>
<div class="right"></div>
CSS:
.left, .right {
float: left;
border: 1px solid red;
height: 200px;
box-sizing: border-box;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
Related
My site is responsive. When I change my window size, the content size scales to fit the window. On mobile it's fine, and on desktop it also scales up and down-according to window size.
My content won't, however, span the whole width of the screen on desktop. Height is fine but width it doesn't stretch right across. It sort of sits between the menu bar and logo.
I tried
html, body{height: 100%; width: 100%;}
.container{
width:100%; height: 100%; max-width: 100%; max-height:
100%;position: relative;}
#media screen and (min-width: 48em)
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-
header
{
display: none;
}
.content {position: relative;}
#body {height: 100%; width: 100%;}
With
.container
It did move it, but not across the whole width, just to the left, slightly outside of logo parameter.
Any ideas?
div#primary {
margin: 0 auto;
float: unset; height: 100%; width: 100%;
}
.container{width:100%; height: 100%; max-width: 100%; max-width:
100%;position: relative;}
the position: relative; take it out :) hope that works.
also 2 max-width's, you can take 1 out as well
you can add in your css
#media (min-width: 875px) {
div#primary {
margin: 0 auto;
float: unset;
}
#masthead .flex-row
{
max-width: 66%;
margin: 0 auto;
}
}
I cannot handle correctly my #main-wrapper behaviour for #media only screen and (min-width: 1400px)
What I am trying to get is that #main-wrapper has 100% width for resolution <1400px and >1400 its width is set to 1336px
Now #menu-section overflows #content-section
Live example:
http://solutionsmvo.nazwa.pl/nell-ogrody/o-nas/
Code:
#main-wrapper {
width: 100%;
overflow:hidden;
}
#menu-section {
width: 25%;
float: left;
height:100vh;
position: fixed;
}
#content-section {
width: 75%;
float:right;
min-height: 100vh;
}
#media only screen and (min-width: 1400px) {
#main-wrapper {width: 1336px; margin: 0 auto;}
}
<div id="main-wrapper">
<div id="menu-section">
</div>
<div id="content-section">
</div>
</div>
because your #menu-section in <1400px has position: fixed; property, it's okay in this case, but when width > 1400px, then this problem occur. remove position: fixed; and test it.
The problem is position:fixed on your sidebar element.
You need to add position relative to main-wrapper and change position from fixed to absolute in your menu-section
#main-wrapper {
position: relative
}
#menu-section {
position: absolute; //instead of fixed
}
I'm not entirely sure what I'm after is possible but at present I have an unordered list when in desktop mode will use display: inline-block to display two images horizontally. However when in tablet/portrait mode, display switches to block to make the unordered list display vertically in the usual manner.
However complicating matters, I have two small background images which I want to overlay over each of the main images. I have used absolute positioning to achieve this however when switching to portrait form (width < 750px), the second main image overlays over the first.
Presumably this is due primarily due to the move away from display: inline-block and the continued use of relative/absolute positioning for the main background image and small background images respectively.
I have remedied this to an extent by giving each li element a specific height (500px), however the intention is that the two lis stick together, when by using a fixed height a gap eventually appears (owing to each li having a width of 100% (so regardless of tablet/phone size, the image will fill the container)).
My first thought was that height: 100% would be suitable but this simply results in the second li overlaying the first.
You can see what I am intending in the below Codepen link if my garbled text is unclear (highly likely). Any guidance on ensuring that the two li elements remain together would be gratefully received. Even if it is to say that the intended effect is not possible! There's also a brief diagram below.
http://codepen.io/grabeh/pen/uInrk
HTML:
<ul class="photo-list">
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/500"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/501"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
</ul>
CSS:
.photo-list {
list-style: none;
padding: 0;
margin: 0;
}
.photo-list li {
margin: 10px 10px 10px 0;
display:inline-block;
width: 48%;
}
.photo-list li:last-of-type {
margin: 10px 0 10px 0;
}
img {
border: none;
width: 100%;
}
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
position: absolute;
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
height: 500px;
}
}
http://jsfiddle.net/xdXv2/
Your main image doesn't have to be absolute positioned. Only the smaller images do since they have to sit on top of it. Putting your main image back into the document flow will give your list items height again, which means you no longer need to give them a fixed height.
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
top:0; /*added this*/
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
/*removed absolute position here*/
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
top:0; /*added this*/
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
/*removed fixed height here*/
}
}
I've got a logo on my website that i'm trying to make stay in the middle and be responsive. I've tried tons of CSS code from "magin-left:auto;..." to "top:30..." but the logo wont get smaller and stay in the middle. I was wondering if anyone could help me. Heres my website -- http://www.mediadude.co.uk -- The logo is the big mediadude sign in the middle, Try resizing the browser and you can see that it doesn't stay in the middle and get smaller.
Thanks for you time.
Hantoo
You have set max-width to the image but not to the h1 tag.
h1#LogoMain {
max-width: 100%;
}
Also you have a media query giving body padding: 20
#media (max-width: 767px) {
body {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
}
Change the above values to 0 for an edge to edge look on your header etc.
This will do what you want: http://jsfiddle.net/TJF8k/1/
<div class="header">
<div class="floater"></div>
<div class="imgwrap">
<img class="image" src="//placehold.it/400x150">
</div>
</div>
For the CSS, you'll need to adjust the negative margin-bottom on .floater based on the dimensions of your image.
.header {
background-color: teal;
height: 300px;
}
.floater {
height: 50%;
width: 100%;
margin-bottom: -10%;
}
.imgwrap {
width: 50%;
margin: 0 auto;
max-width: 400px;
}
.image {
max-width: 100%;
vertical-align: bottom;
}
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.