I have this CSS for 2 divs:
#homepage-twitter {
width:28%;
height:500px;
overflow:hidden;
display:inline;
float:right;
}
#homepage-blog-posts {
width:70%;
height:500px;
display:inline;
float:left;
margin-right:10px;
border-right:1px solid black;
}
#media screen and (max-width: 1250px) {
#homepage-blog-posts {
width:100%;
border-right:0;
}
#homepage-twitter {
display:block;
width:100%;
border:1px solid #F36F25;
}
}
here is a fiddle with the full html and css code: http://jsfiddle.net/Gb8Fr/
if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other
how can i stop them from doing this?
Remove the height: 500px from homepage-blog-posts or add overflow: hidden to it. You can remove it as part of the media query property if you need.
Related
In my local server the product boxes fill the full width of the page as they are set to a complete value of 100%. And the borders are showing nicely..
But on my live test site its not filling 100% and leaving a gap on the far right. aswell as the borders between the products disappearing...
It seems that the hover effect is sitting at the right width as it is overflowing on the right of the product image.(attached image)
Live site here: http://pagedev.co.uk/hoppings/products/
This is the CSS for each product box:
.grid-wrapper {
width:100%;
height:auto;
margin:0px auto;
}
.grid-wrapper img{
width:99.8%;
height:auto;
}
.grid-item {
width:20%;
margin-right:-6px;
margin-bottom:0px;
display:inline-block;
vertical-align:top;
border:1px solid #cfd0d1;
border-top:0px solid #cfd0d1;
background-color:#ffffff;
#media #{$l-desktop} {
width:25%;
margin-right:-6px;
}
#media #{$desktop} {
width:33.2%;
margin-right:-5px;
}
#media #{$mobile} {
width:50%;
margin-right:-5px;
}
}
.image-hovers {
width:100%;
height:auto;
position:relative;
}
.product-hover{
position:absolute;
visibility: hidden;
opacity: 0;
width:100%;
height:100%;
top:0px;
margin:0 auto; left:0px;
z-index:100;
background-image: url("../images/plus.svg");
background-repeat:no-repeat;
background-position:center;
background-position:fixed;
background-size:55px 55px;
background-color:$red;
#include transition(0.5s);
}
I guess your server (or build process) is minifying the HTML (maybe with PageSpeed or similar module), thus removing spaces between the boxes, which your CSS relied on. You seem to use the negative margin to work around the spaces problem, but the real solution is: remove the spaces from your HTML and then you can also remove the negative margins from your CSS.
Remove the margin-right and set box-sizing to border-box:
.grid-wrapper {
width:100%;
height:auto;
margin:0px auto;
}
.grid-wrapper img {
width:99.8%;
height:auto;
}
.grid-item {
box-sizing: border-box;
width:20%;
/*margin-right:-6px;*/
margin-bottom:0px;
display:inline-block;
vertical-align:top;
border:1px solid #cfd0d1;
border-top:0px solid #cfd0d1;
background-color:#ffffff;
#media #{$l-desktop} {
width:25%;
/*margin-right:-6px;*/
}
#media #{$desktop} {
width:33.3333%; /*33.2 will leave space on the right.*/
/*margin-right:-5px;*/
}
#media #{$mobile} {
width:50%;
/*margin-right:-5px;*/
}
}
Try this .grid-item{box-sizing: border-box; margin-right: 0;}
#media (max-width: 1400px) {
.grid-item {margin-right:0;}
} /* put margin-right 0 here */
I can't comment yet. This is not an answer just a quick fix
try
.grid-wrapper {
width: 101%;
}
I am trying to create a row of divs that will span the width of the screen. The div must have a fixed height and width and the divs will drop to another line the screen width has already been filled. I am also trying to apply media queries so that the divs, when in a smaller screen will span the entire width.
Media queries:
#media screen and (max-width:400px) {
.test {
display:inline-block;
width: 100% height:150px;
padding:10px;
}
}
#media screen and (min-width:599px) {
.test {
display:inline-block;
width: 30% height:150px;
padding:10px;
}
}
#media screen and (min-width:600px) {
.test {
display:inline-block;
width: 20% height:150px;
padding:10px;
}
}
This is what I have so far: https://jsfiddle.net/9deLmbps/
As you can see the div changes height when there is multiple lines of text in it. How can I ensure each div is kept the same height eve if one has more text?
you have written
width: 100% height:150px;
but it should be
width: 100%; height:150px;
same applies to other occurences
i updated your fiddle: https://jsfiddle.net/9deLmbps/1/
you can use vertical-align:top for better visual appearance:
https://jsfiddle.net/9deLmbps/2/
perhaps you are looking for this:
.test{
background-color: skyblue;
display:inline-block;
width: 150px;
height:100px;
overflow:hidden;
}
I updated your fiddle for visual experience.
jsfiddle:fixed width and height and divs will drop to another line the screen width has already been filled
I have this html code bellow representing a small panel, this panel should be set to any type of screen, but it has the following rule:
When the resolution is 800x600 or lower it stops to adjust (stay with 800x600), when the screen
resolution is 4K (4096x2160) or higher it stops to adjust (stay with 4096x2160).
in this cade the minimal resolution is 800x600 and the max resolution is 4096x2160. For that I try this code:
<div id="topo" style="background:#EEEEEE; border:1px solid #BBBBBB; height:10%; width:100%; border-radius:5px; position: relative; min-width:923px; min-height:88px; max-width:1908px; max-height:110px;">
</div>
<div style="float:left; width:100%; min-width:923px; max-width:1920px; height:90%; max-height:1080px; min-height:720px;">
<div id="Menu_B" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left; text-align:center; ">
</div>
<div id="Menu_left" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:1125px; max-height:861px; height:89%; min-height:805px; width:59.2%; border-radius:5px; font-family: 'Droid Sans', sans-serif; position: relative; margin-top:5px; float:right; min-width:547px;">
</div>
<div id="Menu_C" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left;">
</div>
</div>
And you can test it in this Website, I think the problem is in max-width, max-height, min-width, min-height that are in pixels mode instead of percentages, right? Need javascript to do that?
How can I solve this design problem and put that idea to work?
First of all, stop inline CSS properties into HTML and move them to CSS file.
Than you can use Media queries which allows you to have the separate rules for the various screen resolutions.
So, your CSS should look like the following:
.typo {
background:#EEEEEE;
border:1px solid #BBBBBB;
border-radius:5px;
height:10%;
max-height:110px;
width: 100%;
}
#media only screen and (max-width: 800px)
{
.typo {
min-width: 800px;
}
}
#media only screen and (min-width: 4096px)
{
.typo {
max-width: 4096px;
}
}
<div id="topo" class='typo'>Typo text</div>
Try to run this code in the full screen; resize the browser window.
You can change the dimensions of the divs to percentages. Then you just need to set the width and height of the body element. You can use window.innerWidth to constrain its dimensions.
var body= document.querySelector('body');
if(window.innerWidth < 800) {
body.style.cssText= 'width:800px;height:600px';
}
else if(window.innerWidth > 4096) {
body.style.cssText= 'width:4096px;height:2160px';
}
Fiddle
I have this example: http://jsfiddle.net/35Js5/7/
I want to be able to have my nice row of images split onto two lines when the browser window is below a certain width. The top row (.companylist) is what I have currently and the bottom row (.companylist2) is what I have tried (the display:inline-block method, to no avail).
Basically I need to be able to keep the HTML structure if possible and keep the vertical alignment of the images (they scale down if the box is too small for them).
CSS:
.col {
box-sizing:border-box;
display:inline-block;
float:left;
padding:10px 10px;
}
.col1 {
width:100%;
}
.col2 {
width:50%;
}
.col4 {
width:25%;
}
.col8 {
width:12.5%;
}
.companylist {
display:table;
table-layout:fixed;
}
.companylist .col {
display:table-cell;
height:200px;
vertical-align:middle;
float:none;
}
.companylist .col img {
max-height:100%;
max-width:100%;
}
.companylist2 {
display:inline-block;
}
.companylist2 .col {
display:inline-block;
height:200px;
vertical-align:middle;
float:none;
}
.companylist2 .col img {
max-height:100%;
max-width:100%;
}
#media screen and (max-width: 768px) {
.mindmap .cell > p {
font-size:1em;
}
.col8 {
width:25%;
}
.col4 {
width:50%;
}
.col2 {
width:100%;
}
}
Elements with display: table-cell will act like cells within a single table-row unless you change your markup.
To get the behaviour you describe, you could add a span that snaps from "display: inline" to "display: table-row" at your breakpoint.
Much messing about later:...
The answer is yes, if you have a fixed height for each cell and if you're willing to get around the white-space issue with a hack:
#media screen and (max-width: 768px) {
.col8 {
width:25%;
}
.companylist .col {
display:inline;
margin:0 0 0 -3px;
padding:0;
}
.companylist .col:first-child {
margin:0;
}
.companylist .col img {
display:inline-block;
max-height:200px;
max-width:25%;
vertical-align:middle;
}
}
Basically set the original "cell" to be display:inline;, add negative left margin to counteract the white space (make sure the first one doesn't have it), make the contents of the cell display:inline-block;
Not perfect, but a lot better...
I'd like to vertically align multiple lines of text to the right of a left-floated image.
However
The image size (height and width) will vary and is unknown in advance
The length of text varies also and will usually comprise multiple lines
Solution needs to be responsive to adapt to varied screen sizes
Solutions should not involve specific px width or height dimensions for images, divs or anything else
I don't want to use tables as the text will need to drop underneath the image in certain scenarios when there isn't enough room for the text beside the image
I've looked back through previous questions but nothing quite matches what I am looking for. It needs to work on any device so I can't use absolute px values for any dimension.
How should I style the following to achieve that?
<img src="image.jpg" >
<p>Here is the text that should go to the right of the image</p>
Thanks for any help.
This will get you started: jsFiddle example - look below for a better method.
Basically, vertical-align:middle and display:inline-block are used on both the p and the img elements for centering.
HTML
<div class="element">
<img src="http://placehold.it/150x150"/>
<p>Lorem Ipsum is simply dummy text </p>
</div>
CSS
.element {
background:rgb(134, 226, 255);
margin:10px;
}
p {
display:inline-block;
margin:0px;
width:70%;
background:white;
vertical-align:middle;
}
img {
display:inline-block;
vertical-align:middle;
}
Here is better approach using display:table/display:table-cell Same HTML..
jsFiddle example - semi-responsive... Other jsFiddle example - responsive img elements..
CSS
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
Yet another update using media queries
You could obviously use whatever breakpoints you want. I use 480px, as this is just for example purposes. Try resizing the window. jsFiddle example
CSS
#media only screen and (min-width: 480px) {
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
}
#media only screen and (max-width: 479px) {
.element {
width:100%;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
background:white;
}
img {
width:50%;
margin:0px auto;
display:block;
height:auto;
}
}