I am using this CSS for a really simple image gallery:
.product_container {
width:100%;
display:block;
}
.product_images {
width:45%;
display:inline-block;
border:1px solid black;
}
.product_images .large {
}
.product_images .small img {
display:inline;
float:left;
margin:5px;
width:151px;
}
i want to have a large image and then rows of 3 under that image, i created an example in a fiddle here
https://jsfiddle.net/jdd9hzqo/
when the page is resized, the small images are moving but i want them to stay in rows of 3 and resize themselves but keeping to the same size as the .product_container
Fiddle:https://jsfiddle.net/jdd9hzqo/2/
Changes to be made:
.product_images {
width:100%;
display:inline-block;
border:1px solid black;
}
.product_images .large img {
width:100%;
}
.product_images .small img {
display: inline;
float: left;
width: 33%;
box-sizing: border-box;
}
https://jsfiddle.net/jdd9hzqo/1/
Remove float:left; in .product_images .small img {
And add:
.small {
white-space: nowrap;
}
For the resize add something like width: 30%; in .product_images .small img {
Related
How can i align the two different sizes lines one by one horizontally with no space between them?
Like
See here i want no space between the lines means the APP downloads exactly after 5M
I tried with the following:
.text
{
color:white;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
<div class="text">
<span class="big">52M</span>
<span class="small">App Downloads</span>
</div>
Maybe you could use 'flex-box' and change the 'line-height' value of the span elements. It's a possible solution.
Example
.text
{
width:20%;
height:20%;
padding:5%;
background:red;
color:white;
display:flex;
flex-direction:column;
}
.big
{
font-size:5em;
line-height:0.8em;
margin:auto;
}
.small
{
font-size:2em;
margin:auto;
}
Try white-space: nowrap
<style>
.text
{
color:white;
white-space: nowrap;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
</style>
With text-align: center.
Try this: http://codepen.io/r3npi2/pen/vKmgZG
.text
{
color:white;
background-color:red;
display:inline-block;
text-align:center;
}
.big
{
font-size:5em;
display:block;
}
.small
{
font-size:2em;
display:block;
}
I'm assuming you want them to be underneath each other... the question isn't very clear regarding that.
All you have to do here is change the span elements to block elements, either by CSS or - the reason I'd prefer for simplicity - changing them to divs. Then, give the surrounding div a text-align:center (and a background-color to see the result), and you're done!
.text {
background-color: #d00;
color: white;
text-align: center;
}
.big {
font-size:5em;
}
.small {
font-size:2em;
}
<div class="text">
<div class="big">52M</div>
<div class="small">App Downloads</div>
</div>
You can do it using display:block and float left:
.text {
color:white;
background-color: red;
float: left;
width: 300px;
text-align:center;
}
span {
display: block;
width:100%;
float:left;
margin: 0px;
}
Try adding a break in between them to space them out like so.
<style>
.text
{
color:white;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
</style>
<div class="text">
<span class="big">52M</span>
<br>
<br>
<span class="small">App Downloads</span>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a four-column div layout.
When viewing the page on mobile, I want the layout to shrink to a two-column div.
JsFiddle
CSS:
.style1 {
font-style:normal;
font-weight:bold;
color:#FFFFFF;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
.container1 {
float:left;
width:100%;
position:relative;
}
#col1 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:77%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#col2 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:81%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#col3 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:85%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD;
}
#col4 {
float:left;
width:23%;
min-height:268px;
position:relative;
/*margin-right:10px;
left:89%;*/
padding:10px;
overflow:hidden;
margin-bottom:15px;
background-color:#DDDDDD
}
#year_banner {
width:auto;
margin:0px 10px 0px 10px;
align-self:center;
background-color:#E60000;
text-align:center;
}
img.displayed {
margin:0 auto;
display:block;
max-width:100%;
height:auto;
}
Any help is appreciated! Many thanks!
You have quite a lot of repeating code. You can eliminate that by using classes; this will also make it much easier to change all of the columns at once when the screen changes size.
For example:
.col{
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#media screen and (max-width:380px){
.col{
width:50%;
}
}
I have prepared a simple example: https://jsfiddle.net/rey9xc1h/
body {
margin: 0;
}
.row {
width: 100%;
min-width: 320px;
margin: 0;
}
.col {
box-sizing: border-box;
background-color: #fff;
float: left;
padding: 10px;
margin: 5px 1%;
width: 98%;
}
#media (min-width: 320px) {
.row {
overflow: hidden; /* Clearfix */
}
.col {
width: 48%;
float: left;
}
}
#media (min-width: 768px) {
.col {
width: 23%;
}
}
I found what im looking for ALMOST, (http://codepen.io/anon/pen/PqxQVN).
But the only problem is i need the container to have height of auto and the sidebar to have a height of 100%. When i do that the sidebar disappears.
#container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}
#media screen and (max-width: 1000px) {
.sidebar { clear:both; width:100% }
.content { width:100%; }
}
Any help would be appreciated. :)
I have used the universal selector (*) to remove padding and margin, therefore the sidebar will be 100% of height.
For what concerns the green container, by simply removing the height from 100px to "auto" it will automatically fill the content.
Link to codepen
*{
margin: 0;
padding: 0;
}
#container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: auto; width:80%; float:left; margin-top: 20px}
#media screen and (max-width: 1000px) {
.sidebar { clear:both; width:100% }
.content { width:100%; }
}
This design isn't perfect as you might find some text going under the sidebar, but should be a good start.
Regards,
-Gallo
give the height to sidebar as .sidebar{height:500px;} not to container
*{
margin: 0;
padding: 0;
}
#container { height:auto; width:100% }
.sidebar { background:red; float:right; height:500px; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}
#media screen and (max-width: 1000px) {
.sidebar { clear:both; width:100% }
.content { width:100%; }
}
I'm trying to float divs for a responsive website and it's not working properly. I need them to be in the order below because when the screen gets smaller, they need to stack with 1 on top, then 2, the 3. The third div is not going nicely underneath the first div. Any help is appreciated!
<div class="1">info</div>
<div class="2">info</div>
<div class="3">info</div>
.1 {
width:23%;
float:right;
}
.2 {
width:76%;
float:left;
}
.3 {
float:right;
width:23%;
}
Again, just to be clear, I need "3" to be underneath "1" but it's going underneath "2". Thanks!
Css Class shouldn't begin with number.
Demo
.one {
width:23%;
float:right;
}
.two {
width:76%;
float:left;
}
.three {
float:right;
width:23%;
}
I guess this is what you want Demo
* {
box-sizing: border-box;
}
.one {
width:23%;
float:left;
background-color: #333;
}
.two {
width:76%;
float:left;
background-color: #666;
}
.three {
float:left;
width:23%;
background-color: #ddd;
}
I guess using inline block will work. Even if you resize the window without the percentage width.
.one {
width:23%;
display: inline-block;
color: yellow;
}
.two {
width:76%;
display: inline-block;
color: orange;
}
.three {
display: inline-block;
color: red;
width:23%;
}
Demo
your code was right, except that css-classes must not start or only contain a number. DIV.two does not nedd to float:
<div class="one">info 1</div>
<div class="two">info 2</div>
<div class="three">info 3</div>
And the css:
.one {
width:23%;
float:right;
background-color: yellow;
}
.two {
width:76%;
background-color: grey;
}
.three {
float:right;
width:23%;
background-color: red;
}
See the fiddle.
I have this CSS Code:
html,body {
font-family:Arial;
font-weight:bold;
}
.container {
text-align:center;
}
.box {
width:475px;
display: inline-block;
margin:10px 20px 0 auto;
padding:12px;
border:1px solid black;
min-height:60px;
text-align: center;
float: left;
height: 200px;
}
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
}
.box p {
font-size:60px;
border:1px solid black;
margin-bottom:0;
}
but the divs with the two lines of text in make the values/numbers display lower than all the other divs with only one line of text.
how can i make all the values/numbers display in the same place inside the the .box divs?
Here is a fiddle with the full code: http://jsfiddle.net/8kex9/
With your code, you could do something like this: JS Fiddle
Giving them both absolute positions, will cause them to be positioned based on parent, rather than the sibling. You just can't add too many lines of text, or else it will run into each other.
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
position: absolute;
width: 465px;
}
.box p {
position: absolute;
font-size:60px;
border:1px solid black;
margin-top: 120px;
width: 465px;
}