I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
Related
Align a link/button to the right and bottom of a container that have also other elements. I can't use flex.
I found some solutions here the majority of them using position relative on parent, and absolute on children, but I couldn't align as I wanted;
I can't modify the class .right and .button, I need to be set this way, because this is just a component/section.
Want:
the links view1, view2 align to the right of div.right and have the same bottom as .thumb (the 3 images)
if the images are missing, the view links to go to the left;This can be done with another class, that I can add dynamically.
.right {
display: table-cell;
}
.button {
display:inline-block;
}
thumbs::after {
display: table;
clear: both;
content: "";
}
.thumb {
float:left;
margin-left: 5px;
}
<div class="right">
<img src="https://loremflickr.com/100/50" />
<p class="text"> Capital remain stand tree answer next fast. Religious our life tax common interesting other. Lay organization model position game.</p>
<div class="thumbs">
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
</div>
View1
View2
</div>
Try this
.right {
display: table-cell;
}
.row {
position: relative;
}
.button {
display:inline-block;
position: absolute;
bottom: 0;
right: 0;
}
.thumbs {
content: "";
clear: both;
display: table;
}
thumbs::after {
display: table;
clear: both;
content: "";
}
.thumb {
float:left;
margin-left: 5px;
}
<div class="right">
<img src="https://loremflickr.com/100/50" />
<p class="text"> Capital remain stand tree answer next fast. Religious our life tax common
interesting other. Lay organization model position game.</p>
<div class="row">
<div class="thumbs">
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
<div class="thumb">
<img src="https://loremflickr.com/50/50" />
</div>
</div>
View Products
</div>
</div>
I have the below HTML/CSS, which is then followed by media queries in the file for the various max/min pixel sizes.
<div class="header-flags-wrapper">
<div class="flagbox1">
<img src="https://**********.blob.core.windows.net/flags/014-UK.png" />
<img src="https://**********.blob.core.windows.net/flags/015-spain.png" />
<img src="https://**********.blob.core.windows.net/flags/006-portugal.png" />
<img src="https://**********.blob.core.windows.net/flags/007-brazil.png" />
</div>
<div class="flagbox2">
<img src="https://**********.blob.core.windows.net/flags/002-cuba.png" />
<img src="https://**********.blob.core.windows.net/flags/003-venezuela.png" />
<img src="https://**********.blob.core.windows.net/flags/004-bolivia.png" />
<img src="https://**********.blob.core.windows.net/flags/005-paraguay.png" />
</div>
<div class="flagbox3">
<img src="https://**********.blob.core.windows.net/flags/001-uruguay.png" />
<img src="https://**********.blob.core.windows.net/flags/008-argentina.png" />
<img src="https://**********.blob.core.windows.net/flags/009-colombia.png" />
<img src="https://**********.blob.core.windows.net/flags/010-chile.png" />
</div>
<div class="flagbox4">
<img src="https://**********.blob.core.windows.net/flags/011-peru.png" />
<img src="https://********.blob.core.windows.net/flags/012-ecuador.png" />
<img src="https://*********.blob.core.windows.net/flags/017-angola.png" />
<img src="https://**********.blob.core.windows.net/flags/018-european-union.png" />
</div>
<span class="flagstretch"></span>
</div>
The default view on a screen 1200px wide looks good. What I can't get my head around is how to make this responsive. All other elements shrink closer together until they hit a boundary and then they change shape or wrap etc. What is the best approach to achieve this please? What I would like is that the margin on the flagboxes decreases bringing them closer together until they are touching each other then I hide the wrapper all together. Every attempt to do so has failed and like most things is probably easy when you know how.
.header-flags-wrapper {
float: left;
height: 50px;
width: 1500px;
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 {
width: 310px;
/*height: 30px;*/
/*vertical-align: top;*/
display: inline-block;
*display: inline;
zoom: 1
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 a {
float: left;
/*width: 30px;*/
padding: 2px;
margin-top: 5px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
Example of code can be seen at http://globaleyes.azurewebsites.net
I have a 3 column grid, which is sitting inside a 100% container div. But as of now it is just being pulled all the way to the left side of the page. I want the three columns to be div to be centered inside the container. Here is a screenshot of the design that I'm trying to code: To fix the margin issue between each grid box, I used the technique found here (Scroll down to the last section "Roll your own...")
HTML:
<div class="featured-properties">
<div class="properties">
<div class="property">
<img src="img/sample-prop-1.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-2.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-3.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-4.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-5.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-6.jpg" alt="Sample Property" />
</div>
</div><!-- end .properties -->
</div><!-- end .featured-properties -->
CSS:
.featured-properties {
width: 100%;
}
.properties {
margin: -79px;
overflow: hidden;
clear: both;
width: 1047px;
}
.property {
float: left;
margin-left: 79px;
}
No need explanation, see the CSS below and demo (responsive!).
DEMO: http://jsfiddle.net/0m5p2818/
.properties {
text-align: center;
max-width: 720px; /* (200+(20x2))x3 */
font-size: 0; /* fix for white space bug */
margin-left: auto;
margin-right: auto;
}
.property {
display: inline-block;
margin: 20px;
font-size: 16px;
}
I'm not really sure if I understood your question, but I think CSS 3 Flexbox can help you to achieve what I think you need.
Take a look at it here and see if it works for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to accomplish something like this:
As I am using Bootstrap, for now I have this:
<div class="col-md-3">
<div class="test">
<%= (image_tag("http://example.com.image.jpg", :class => "img-responsive")) %>
<h2>hello</h2>
</div>
</div>
</div>
CSS:
.test {
position: relative;
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
}
This works well for big and medium screens but the problem is on smaller screens. After all elements stack to one column the problem appears with smaller images. On bigger screens where there are multiple elements in one row there is no problem, text appears on the bottom of the image. The problem is that some images are not big enough on smaller screens as they need to have width 100% of the screen and they are only 300-400ox wide. Because of that they don't use 100% of the screen, but header does use it.
It looks something like this:
**********************************
* *
* *
* Image *
* *
* *
********************************************
* Header *
********************************************
So, header spreads all the way to the left and right of the screen and jumps outside of the image. How to keep header inside of the image no matter of screen size?
Thank you!
Try this:
Demo : http://jsfiddle.net/lotusgodkk/bm3mjhm1/
CSS:
.test {
position: relative;
display:inline-block; //Add display:inline-block; if it doesn't affect your code.
}
img {
max-width:100%;
}
h2 {
background-color: #bebebe;
position: absolute;
bottom: 0;
left: 0;
right:0; // Remove width:100% and add left,right offset.
}
HTML:
<div class="test">
<img src="http://lorempixel.com/400/200/sports/1/" />
<h2>Sample TExt. Sample TExt</h2>
</div>
Check the demo for different sizes of image.
DEMO: http://jsbin.com/nobape
There are two options. The first is the answer, but it's not the best idea. When the viewport gets very small, the caption text can cover up a good portion of the image. When you look at the demo, the second row only does the caption over the image at the 500px min-width and under that, it stacks, which looks very nice and easy to read.
CSS
.img-full-width {
width: 100%;
height: auto;
}
.caption {
position: relative;
margin-bottom: 2%;
}
.caption h3 {
margin: 0;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: rgba(41,82,123,.8);
font-size: 15px;
}
.caption-2 {
position: relative;
margin-bottom: 2%;
}
.caption-2 h3 {
margin: -1px 0 0 0;
color: #fff;
padding: 10px;
background: rgba(41,82,123,1);
font-size: 15px;
}
#media (min-width:500px) {
.caption-2 h3 {
margin:0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(41,82,123,.8);
}
}
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
<div class="col-sm-4">
<div class="caption-2">
<img src="http://placekitten.com/g/400/300" class="img-full-width alt="" />
<h3>My Caption Goes Here</h3>
</div>
</div>
</div>
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}