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>

Align images to right of the main image

I just want the large image to display on the left hand side, and the smaller images (grid layout - repeat(2, 1fr) in this fraction) to align on the RIGHT.
But its showing like this.
https://i.stack.imgur.com/S76jN.png
Totally there are seven small images and one big image. I am just trying to code an image gallery using HTML CSS JS.
.container {
width: 100%;
}
.main-img img{
display: inline-block;
width: 70%;
}
.images img {
float: right;
width: 30%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>
Kindly help me to solve this problem.

The problem is you are not setting width correctly. You should set width on the wrappers. Also don't forget to use Float:left in order to have images oneline. I have removed float:right and display:inline-block from img elements as these are not necessary, Consider the following example :
.container {
width: 100%;
}
.main-img{
width:70%;
float:left;
}
.main-img img{
width:100%
}
.images img {
width: 100%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>

two <div> layers with same properties in html

Is there a way i put two layers in html ?
what i want to do is to put two with same properties (size, place etc)
my purpose is when i hover the image (first div) the other div shows up (contains background image and text)
my actual code is :
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
margin-right: 20%;
margin-left: 10%;
margin-top: 4%;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<img src="images/Layer 3.png" style="width:100%" onClick="myFunc(this.id);">
<img src="images/Layer 6.png" style="width:100%">
<img src="images/Layer 4.png" style="width:100%">
<img src="images/Layer 4.png" style="width:100%">
<img src="images/Layer 4.png" style="width:100%">
</div>
<div class="column">
<img src="images/Layer 6.png" style="width:100%">
<img src="images/Layer 12.png" style="width:100%">
<img src="images/Layer 4.png" style="width:100%">
<img src="images/Layer 7.png" style="width:100%">
</div>
<div class="column">
<img src="images/Layer 9.png" style="width:100%">
<img src="images/Layer 8.png" style="width:100%">
</div>
</div>
</div>

You could use the :hover element together with hiding.
element1:hover{
display: none;
} > element2{
display: inline;
}
Add element1 to the first div's class and element2 to the second div!
Ps: sorry haven't tested, if it doesn't work I'm sorry but it is worth trying!

putting 2 images side by side with no space and centered

I am trying to get 2 images that are side by side centered on the page and I am completely lost. I've included align="center" in div and it does nothing and I have tried positioning absolute and it kicks that image to center but other is still margined left. I have included my code below for you to see. I'm sure it's fairly easy and my brain is just stuck clocking today. Any help would be much appreciated. Thanks
<div>
<div class="item">
<contentful-image url="#Model.EventImages[0].File.Url" #*width="300" height="300" *# style="float:left; width: 30%; margin-bottom: 0.5em; position: absolute " />
</div>
<div class="item">
<contentful-image url="#Model.EventImages[1].File.Url" #*width="300" height="300"*# style="float:left; width: 30%; margin-bottom: 0.5em";/>
</div>
</div>

You can try these two examples and see if any solves your problem, though presented with the img element.
If you want the body element to be the parent, you can do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
/* Add this if you want to place them horizontally. */
/*
div {
display: flex;
}
*/
img {
display: block;
}
<div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
And if you want the div to be the parent, like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.parent {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */ /* Add this if you want to place them vertically. */
width: 100vw;
height: 100vh;
}
img {
display: block;
}
<div class="parent">
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
Where the .parent takes full width & height of the viewport.

Use CSS class instead of inline CSS your CSS goes as follows:
CSS for image tag:
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
CSS for the div you have to contain the image:
.image-container{
display: inline-block;
}
Now the CSS to centre your image:
#image{
text-align:center;
}
Finally how to use it in html:
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
</div>​
<html>
<head>
<style>
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
.image-container{
display: inline-block
}
#images{
text-align:center;
}
</style>
</head>
<body>
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
</div>​
</body>
</html>
Here "display: inline-block" helps you to display two or more images to be displayed side by side and margin as auto helps you to automatically adjust your margin irrespective of the screen size
I hope this solves your need for any further query comment below.

try using flex-box, it's pretty straight forward. Set display:flex for the parent, then you can align the children with align-items: center.
html like:
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
and css like:
.parent {
display: flex;
align-items: center;
}

Try creating parent and child div like this:
.parent-container {
display: flex;
-webkit-flex-wrap: nowrap;
}
.child-container{
padding: 10px;
}
<div class="parent-container">
<div class="child-container">
<img alt="First Image" src=""/>
</div>
<div class="child-container">
<img alt="Second Image" src="" />
</div>
</div>

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