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>

How do I make these cards align with equal gap?

I am using css grids to make some divs align. As seen in the picture provided, the cards have an uneven gap between them. I don't want to use padding or position translate to align them because the resolutions sizes will differ from device to device and it will look all jumbled.
HTML:
<div class= "column"> <!--this column has been placed so that it can include a number of div boxes that
carries the solutions for the website. -->
<div class="card card1">
<h5>breathing tool</h5>
<a href="breathing-tool.html">
<ol>
<li> Breathing helps reduce anxiousness. </li>
<li> This mini programme is developed to help with rhytmic breathing. </li>
</ol>
</a>
</div>
<div class="card card2">
<h5>Pink meditation room</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
<div class="card card3">
<h5> Quote dispenser</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
</div> <!--this is the closing tag of "column"-->
CSS:
column{
display: grid;
height: auto;
width: auto;
grid-template-columns: repeat(2,4fr);
/*the colums numbers have been replaced with a repeat of 2 columns with the specified size of 4fractions*/
grid-template-rows: 2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
background-color: bisque;
grid-template-areas:
"card1 card1 card2 card2 card3 card3";
/* The display grid here works by making the card divs
align properly like I need them to. This will make
space for writng and describing each of the provided
solutions without a disorientation.*/
}
.card{
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;

Use flexbox instead of grid
Remove all the grid in .column and replace them with these:
display: flex; /* adding flex */
justify-content: space-around; /* Positioning them with spaces */
flex-wrap: wrap; /* Wrapping Elements when page is small */
I also added a border to show the elements, you can remove it.
Don't forget to run the code snippet and press full page to see the full result
This would be your final code:
.column{
display: flex; /* adding flex */
justify-content: space-around; /* Positioning them with spaces */
flex-wrap: wrap; /* Wrapping Elements when page is small */
height: auto;
width: auto;
background-color: bisque;
}
.card{
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;
/* You can remove this: */
border: 1px solid;
}
<div class= "column"> <!--this column has been placed so that it can include a number of div boxes that
carries the solutions for the website. -->
<div class="card card1">
<h5>breathing tool</h5>
<a href="breathing-tool.html">
<ol>
<li> Breathing helps reduce anxiousness. </li>
<li> This mini programme is developed to help with rhytmic breathing. </li>
</ol>
</a>
</div>
<div class="card card2">
<h5>Pink meditation room</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
<div class="card card3">
<h5> Quote dispenser</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
</div> <!--this is the closing tag of "column"-->

Div goes under first div when page is resized

I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?

You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>

Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container

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>

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