Develop Reference

Why can't I get these images with titles to flow horizontally center?

Previously I posed a question here1, and it was answered appropriately to solve my first issue but not my second issue - the first being proper code arrangement and the second being the question I'm talking about. I removed the CSS code that was originally applied, which you can view on original question, and applied the new CSS code as follows:
.img {
margin: 10px;
}
.grid {
display: flex;
flex-wrap: wrap;
/* max-width: 800px; */
}
.grid a {
display: flex;
align-items: center;
}
I removed the max-width: 800px; and received the following result.
Adding the max-width: 800px; showed the same results in image. Tried various combinations of CSS with no positive results. The code snippet as follows:
<div className={styles.grid}>
<div className={styles.imgc}>
<a href="..\pages\satweather.js">
<img
className={styles.img}
src="weatherbutton.jpg"
width="100"
height="50"
onclick="openModal();currentSlide(1)">
</img>
<div>→ SatWeather</div>
</a>
</div>
/* code continues in repetition for 4 more images
before ending with */
</div>
Does anyone have any suggestions on what I might try or a solution to this problem? To get these images aligned center and horizontally to the page. Help is appreciated.
Here is desired result, but without space between photo and link to page
Please Note: This is JS, not HTML.

Here is html version of your code.
Use display:flex to image container and then, Make one separate element for image box just like here which is image-box set it's anchor tag to display:flex and align-items:center.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #050505;
}
.image-container {
position: relative;
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
}
.image-class {
height: 50px;
width: 100%;
object-fit: cover;
}
.image-box a {
display: flex;
flex-direction:column;
}
<div class="container">
<div class="image-container">
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
</div>
</div>

The divs won't sit side by side

I am having some difficulty getting my div elements to sit side by side with each other. There is sufficient width on the page for one div to sit next to the other, but it just seems to sit beneath the other div.
HTML parent component:
<div class="Container">
<div class="header">
<div>
<h1>Information & Advice</h1>
</div>
<div>
<h2>From The Daylight Experts</h2>
</div>
</div>
<div class="wrapper">
<app-carousel></app-carousel>
<app-instagram></app-instagram>
<app-guides></app-guides>
</div>
</div>
CSS parent:
.Container {
padding: 0;
width:100%;
height: 100%;
margin: 0;
position: absolute;
}
.header {
display: flex;
justify-content: center;
}
.wrapper {
position: absolute;
float: left;
}
app-carousel component.html:
<div class="carouselContainer">
<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
</div>
app-carousel component.css:
.carouselContainer {
width: 59.5%;
margin-left: 15px;
}
app-instagram component .html:
<div class="instagramContainer">
<div id="curator-feed-default-layout">
Powered by Curator.io
</div>
</div>
app-instagram component .css:
.instagramContainer {
width: 30%;
height: 100%;
float: left;
}
This currently makes the instagram <div> sit under the carousel <div>. I want them side by side, which I thought could be achieved by just floating the child elements of the container.

You can make it clean using flex that will give your clear visibility, this may help you to get going with your changes.
.Container {
padding: 0;
width: 100%;
height: 100%;
margin: 0;
display: flex;
/* you need this to move content side by side */
flex-direction: row;
/* provide the width for parent */
width: 800px;
}
.header {
/* inherit parent width */
width: 400px;
border: 1px solid red;
}
.wrapper {
width: 400px;
/* inherit parent width */
border: 1px solid yellow;
}
<div class="Container">
<div class="header">
<div>
<h1>Information & Advice</h1>
</div>
<div>
<h2>From The Daylight Experts</h2>
</div>
</div>
<div class="wrapper">Your wrapper content here...
<app-carousel></app-carousel>
<app-instagram></app-instagram>
<app-guides></app-guides>
</div>
</div>

Expand Image to container width when moving to next line

Is there a way to make the width of the image, when it transitions into another line to take up as much room as possible?
For example, if the images are displayed next to each other, as soon as one of them drops to the next line, that image on the next line expands to container's width.
I believe I saw this being achieved with flexbox but I can't remember how to do it and if there's alternate ways to do it, I'm all ears.
fiddle:https://jsfiddle.net/jzhang172/6kpyhpbh/
body,html{
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.grid img{
float:left;
height:100px;
}
.grid{
display:flex; flex-grow:2;
flex-wrap:wrap;
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

Add flex:1 to the image.
Revised Fiddle
body,
html {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.grid {
display: flex;
/* flex-grow: 2; <-- can be removed; not doing anything; applies only to flex items */
flex-wrap: wrap;
}
.grid img {
/* float: left; <-- can be removed; floats are ignored in a flex container */
height: 100px;
flex: 1; /* NEW; tells flex items to distribute available space evenly;
a single flex item on the line will consume 100% of the space;
two flex items will take 50% each; etc. */
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

Add this lines to .grid img
flex-basis: 25%;
display: flex;
flex-grow: 1;
height: 100%;
width: 100%;
flex-basis: 25% will let only 4 images / line
flex-grow: 1 will try to grow the images on the line to the div boundaries
width: 100%; height: 100%; will keep the image aspect ratio
JS Fiddle

Rescaling images based off parent image in Bootstrap

I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?

What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}

Responsive Grid of 4 images

I am trying to replicate eBay's 'Today' featured seller layout with 4 square images making up one box (see image), but with the use of Bootstrap. I'm really struggling to understand how I can achieve this. I can get the squares more or less even and looking okay on the lg, md and sm rules as of course things don't need to be resided down proportionately and I can just each square a fixed width and height. However, when it comes to mobile, this goes out the window as it needs to be resize depending on the window size of course.
The html that I've come up with at the moment is basically a grid split up into 9 and 3, (col-xs-9 and col-xs-3), with set heights given at each desktop/tablet width.
The images will sometimes be squared images and other times they will be images in landscape or portrait format, and in this case they will keep their aspect ratio and spread to their max size but within the confines of the containing div.
Is there a way that I can achieve this using Bootstrap or will I need to look at alternatives using javascript for example?
Code below, just in case you need to take a look:
HTML
<div id="featured-merchant-container">
<div class="featured-merchant-listings">
<div class="row">
<div class="primary-img-container col-xs-9 col-sm-9 col-md-9 col-lg-9 no-padding-right">
<div class="big-hero-image">
<a ng-if="merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[0].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
</div>
<div class="secondary-img-container col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding-left">
<div class="big-hero-images">
<div class="first">
<a ng-if="merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[1].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
<div class="second">
<a ng-if="merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[2].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
<div class="last">
<a ng-if="merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[3].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#featured-merchant-container {
border: 1px solid green-grey;
.big-hero-image {
text-align:center;
.thumb {
display:block;
border-right:1px solid green-grey;
height:413px;
display:table-cell;
vertical-align:middle;
text-align:center;
img {
width:100%;
height:413px;
}
}
}
.big-hero-images {
text-align:center;
// border-left:1px solid green-grey;
.thumb {
display:block;
height:137px;
display:table-cell;
vertical-align:middle;
text-align:center;
img {
width:100%;
height:137px;
}
}
.first, .second {
border-bottom:1px solid green-grey;
}
}
}
Please help me. This is driving me crazy :(. Thank you!

Can you do something with flex-box layout?
.cols {overflow: hidden;}
.cols .col {float: left; width: 25%;}
.cols .col:first-child {width: 75%;}
.cols .col img {width: 100%;}
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
<div class="cols">
<div class="col">
<img src="http://placehold.it/350x350" alt="" />
</div>
<div class="col">
<div class="flex-container">
<div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
<div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
<div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
</div>
</div>
</div>

If your images are going to be all kinds of dimensions then you need to either use background images where background-size is set to cover.
.flex-item
background-size cover
background-image url(http://placehold.it/350x350)
Or you need to use object-fit, which is awesome, but has horrible support in IE.
.flex-item img
object-fit cover

Thanks for your answers everyone.
The way I managed to achieve this is by totally removing the use of Bootstrap altogether for the grid. I instead built the grid around percentages. I read something online which talked about how providing a percentage as the value for padding-top can basically give you a container which is of a certain aspect ratio. For example, if you wanted a div which maintained an aspect ratio by 4:3, what you would do is add
padding-top:75%;
in the style sheet for this div.
As long as the div has a given width, you can provide it's height using the padding-top percentage trick. As I wanted all div's in the grid to be square, I added
`padding-top:100%;`
to each of them. So for the big image in the grid, the css (stylus) was as follows:
.big-image {
width: 75%;
/* whatever width you want */
display: inline-block;
position: relative;
float:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-size:0px;
&:after {
padding-top: 100%;
/* 16:9 ratio */
display: block;
content: '';
}
}
Of course, as you can see below, the div needs to be relatively positioned, and the padding needs to be added within the :after css selector.
I hope this helps somebody. Thanks