I am trying to get 2 images to display side by side in mobiles.
1 is an anchor for the home page the other is an anchor for the menu.
They display side by side in a full version but I can’t get them to display side by side in a mobile version. I did this tyo try and work out the problem.
I’ve tried creating a table but it didn’t work (i’ve commented it out)
my HTML code is:
<div class="container">
<div class="grid-container">
<!-- <div class="grid-item1"> -->
<a href="index.html"> <img src="mob-rab-logo.svg" alt="EcoBunny's bunny logo"
style="height: 100px; max-width: 100%;"></a>
<a href="index.html"> <img src="mob-house-head.svg" alt="EcoBunny's bunny logo"
style="height: 100px; max-width: 100%;"></a>
</div>
<!-- </div> -->
``
Here is the css code
.grid-container {
display: grid;
grid-template-columns: 100%;
}
.grid-container a {
display: flex;
max-width: 100%;
}
here is an image
What do Ineed to do to get the mages to display side by side?
One option is to use CSS Flexbox:
.flex-container {
display: flex;
justify-content: space-around; /* or center or space-between */
gap: 10px; /* choose value */
}
a {
flex: 0 1 300px; /* with flex-grow set to zero, max image width will be 300px */:
}
img {
width: 100%;
}
To avoid possible layout shifts during page load, it’s advisable to include CSS aspect-ratio for the images.
Thans.
I did work ut a way, which was to move the container div lower down the file. The resut wasn’t as good.
I’ve messed this up completely.
I wanted the (logo) first image to be about 150px wide and the second (house + notice) to be about 450px wide like on the main header.
I’ve not been able to do this and now the images are full screen width and stack on top of each other. I have tried reducing width but they still stack.
The image that I am trying to create is below (the logo is a link to the home page, the building a menu link.
the header image below is two images saved as one in a graphics package (affinity)
The html code is
<div class="grid-container">
<div class="grid-item1">
<a href="index.html"> <img src="rabbits-logo.svg" alt="EcoBunny's bunny logo"></a>
<a href="index.html"> <img src="house-3d.svg" alt="EcoBunny's bunny logo"
></a>
</div>
The css code is;
@media screen and (max-width:600px) {
body {
max-width: 95%;
margin: auto;
}
/* .grid-item1 {
/*display: none;
margin: auto;
} */
.navbar {
display: none;
}
.grid-container a {
display: flex;
max-width: 100%;
}
.flex-container {
display: flex;
justify-content: space-around; /* or center or space-between */
gap: 10px; /* choose value */
}
a {
flex: 0 1 300px; /* with flex-grow set to zero, max image width will be 300px */
}
img {
width:100%;
}
}
How can I sort this out?
The width of the smallest smartphones in portrait orientation is 320 pixels (that’s CSS pixels, not device pixels). You need to ask yourself how you are going to squeeze the logo and house photo (with ‘Menu’) side-by-side into that width.
You could use @media queries to have a different layout for smartphones but at present I suggest we ignore the menu (which I understand is a navbar).
One approach is to use object-fit:cover on the house photo as demonstrated here:
In CodePen, use the button between ‘Settings’ and "Sign Up’ to get the view on the right as shown here:
You can then drag the left-hand side of the view to change width. If your eyesight is good, you can see the width displayed below. The ‘space-around’ still works for larger browser widths, if that is what you want.
