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
Related
I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>
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>
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've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!
Here's the website: http://thehummingbirdplace.com/
Here's the relevant html:
<div id="adLeft">
<a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
<img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
</a>
<br><br>
<a href="http://www.romancestorytime.com/" target="_blank">
<img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
</a>
</div>
<div class="clear">
</div>
<div id="adRight">
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
</a>
<br><br>
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
</a>
</div>
<div class="clear">
</div>
<div class="sliderDiv" id="slider">
<img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" />
<img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" />
<img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" />
<img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" />
<img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" />
</div>
And here is the css that applies to it:
#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}
#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}
.clear {
float: clear;
}
.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}
I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.
Adding:
body {
min-width: 1400px;
}
to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.
Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.
A media query is used like so:
#media only screen
and (max-width: 1400px){
#adLeft, #adRight {
/* Some sort of styles here */
}
}
I hope that helps, let me know if you have any questions,
Cheers!
I'm running into an issue where center aligning a set of images works in the first div I use it in but then doesn't in subsequent calls.
Here's my CSS:
.writingsText {
width: 750px;
margin-left: 50px;
text-align: justify;
}
.floatImageLeft {
float: left;
padding: 10px;
}
.centerImage {
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
And my html:
<div class="writingsText">
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="goldengrid.png" width="270" height="170" />
<img src="spacer.png" width="10px"/>
<img src="goldenspiral.png" width="270" height="170" />
</div>
<br />
<div class="floatImageLeft"><img src="kochiteration.png" /></div>
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="mandelbrotgif.gif" width="200" height="200" />
<img src="spacer.png" width="10px"/>
<img src="kochgif.gif" width="200" height="100" />
</div>
<br />
</div>
So the first set of centered images look great, my text wraps beautifully around my left floating image, and then on the second call to the centerImage class (and third, etc) the images do a partial indent (to what looks like the left edge of the first set of centered images) but are not centered. I've also tried using
<div style="clear:both"></div>
above the additional centered divs (this fixed alignment issues for me in a separate project) but it doesn't do anything. What am I missing?
Have you tried adding “clear: both” to your .centerImage CSS declaration?