I don't know how to do CSS Responsive - html

I would like to make the tea cups and the text under each one overlap each other in mobile format and leave it as it is in computer format, can you help me please? this is on computer
and this is on mobile
I would like to do something like this on mobile
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div class="selection">
<div class="mate-florale">
<a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
<img src="https://imgur.com/vwQHX9K.png">
</a>
<div class="text-mate-florale">
<h3 text-align="justify-content">Maté florale</h3>
</div>
</div>
<div class="mate-agrumes">
<a href="https://o-mate.fr/products/mate-energisant-morning-boost">
<img src="https://imgur.com/f079TDf.png">
</a>
<div class="text-mate-agrumes">
<h3 text-align="justify-content">Maté agrumes</h3>
</div>
</div>
<div class="mate-fruitee">
<a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
<img src="https://imgur.com/vQvNboK.png">
</a>
<div class="text-mate-fruitee">
<h3 text-align="justify-content">Maté fruitée</h3>
</div>
</div>
</div>
</body>
</head>
CSS :
img {
width: 200px;
margin: 30px;
padding: center;
}
.selection {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0;
}
I clearly don't know what i am supposed to do, that's why i ask for your help. Thank you !


you can put every image of coffee with it's text inside a flex column
that way you have three columns in one row and they are easily manageable on mobile as well
img {
width: 200px;
margin: 30px;
padding: center;
}
.selection {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0;
flex-wrap: wrap;
gap: 10px;
}
.ccol {
display: flex;
flex-direction: column;
justify-content: center;
}
.ccol div {
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div class="selection">
<div class="mate-florale ccol">
<a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
<img src="https://static.toiimg.com/photo/89078867.cms">
</a>
<div class="text-mate-florale">
<h3>Maté florale</h3>
</div>
</div>
<div class="mate-agrumes ccol">
<a href="https://o-mate.fr/products/mate-energisant-morning-boost">
<img src="https://static.toiimg.com/photo/89078867.cms">
</a>
<div class="text-mate-agrumes">
<h3 text-align="justify-content">Maté agrumes</h3>
</div>
</div>
<div class="mate-fruitee ccol">
<a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
<img src="https://static.toiimg.com/photo/89078867.cms">
</a>
<div class="text-mate-fruitee">
<h3 text-align="justify-content">Maté fruitée</h3>
</div>
</div>
</div>
</body>
</head>

Related

Footer issues -I can't make images plus text stay in a horizontal line

I am very new to this so please be kind :)
I am creating a portfolio page with an image gallery, with a header on top and a footer at the bottom. As soon as I entered the code for a gallery, my footer moved - and now I can't see how I can make it all in one line (like it is on the home page I created! It seems fine!)
If anyone would like to give any advice on how to fix this, I'd be so happy! Also for some reason the footer is just floating in the middle of the page?!
Thank you.
#banner{
text-align: center;
}
#heading{
font-size: 25px;
text-align: center;
}
html * {
font-family: 'Quicksand', sans-serif;
text-decoration-color: #f13c20;
}
.navbar{
text-align: center;
font-size: 23px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.column {
float: center;
width: 32%;
padding: 4px;
}
.row::after {
display: table;
}
.footer-navbar{
text-align: center
font-size: 20px;
position: fixed; bottom
}
#copyfoot{
text-align: center;
}
#footernav{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maley Like Maybe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<!-- <---Header--->
<div id=banner>
<img src="images/banner.jpg" width="1250px" height="159px"/></div>
<div id="heading">
<h1>Karen Maley</h1>
</div>
<nav class="navbar">
Home
<!-- Testimonials -->
Contact
</nav>
<hr />
<br>
<br>
<br>
<!-- <---Main -->
<div class="gallery">
<a target="_blank" href="images/portfolio/adviceteacher.jpg">
<img src="images/portfolio/adviceteacher.jpg" alt="Advice from my Art Teacher 2001">
</a>
<div class="desc">Advice from Art Teacher 2001</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/epping.jpg">
<img src="images/portfolio/epping.jpg" alt="Forest">
</a>
<div class="desc">Epping Forest</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/immaterial2022.jpg">
<img src="images/portfolio/immaterial2022.jpg" alt="I'mmaterial">
</a>
<div class="desc">I'mmaterial</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/lifedrawing.jpg">
<img src="images/portfolio/lifedrawing.jpg" alt="Life Drawing">
</a>
<div class="desc">Life Drawing - Movement</div>
</div>
<br>
<div class="gallery">
<div style="padding:35% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721109316?h=07caa51b7c&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title="&quot;Peace is Exhausting&quot; by Karen Maley 2022">
</iframe></div><script src="https://player.vimeo.com/api/player.js"> </script>
</div>
<div class="gallery">
<div style="padding:40% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721142192?h=bfcb05da44&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title="&quot;Mobile&quot;"></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<!-- <---Footer -->
<footer>
<div id="footernav">
<div class="footer-content">
<nav class="footer-navbar">
Home
<!-- Testimonials -->
Portfolio
Contact
</nav>
</div>
<br>
<br>
<div class="row">
<div class="column">
<a href="mailto:maleylikemaybe#hotmail.com">
<img src="images/socialMedia/email.png" alt="maleylikemaybe#hotmail.com"
width="64px" height="64px"><p>maleylikemaybe#hotmail.com</p>
</a>
</div>
<div class="column">
<a href="https://www.instagram.com/maleylikemaybe/">
<img src="images/socialMedia/insta.jpg" alt="#maleylikemaybe"
width="64px" height="64px" ><p>#maleylikemaybe</p></a>
</a>
</div>
<div class="column">
<a href="https://www.youtube.com/channel/UC96yaCbQbhyck2mNY0lMU9Q">
<img src="images/socialMedia/youTube.png" alt="Maley Like Maybe"
width="64px" height="64px" ><p>Maley Like Maybe</p></a>
</div>
</div>
<div id="copyfoot">
<p class="footer-cpr"> © Karen Maley 2022</p></div>
</footer>
</body>
</html>

How to have the 3 images of the same size and when I switch to mobile mode the 3 images overlap?

I have 3 images which are not the same size in Desktop format, how do I get the same size? Then in mobile format I would like it to overlap by taking the entire width.
I tried with flex-direction: column but it doesn't work. I use flexbox for my code.
.background-color {
background-color: #f05f40;
}
h2 {
text-align: center;
padding-top: 2%;
margin-top: 0;
}
.row {
display: flex;
width: 100%;
text-align: center;
}
.content {
justify-content: space-around;
padding: 0 10px;
}
img {
height: 200px;
object-fit: cover;
object-position: center center;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
<div class="background-color">
<h2 id="projets">Mes Projets</h2>
<div class="row">
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>

You are add flex-direction: column inside .content which doesn't have display: flex. Instead you need to add in .row which wraps all three contents
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}

Take a look at this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Images responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>
You would achieve the same size for all images by setting the width and height to the same value. I normally just resize all images in a image editing software such as Photoshop and then just import them. Saves you the work with sizing in CSS.

How to set the maximum width in images with different bootstrap responsive sizes?

I'm having difficulty with several images with different sizes and I plan to set the maximum width and height responsive without blurring in bootstrap.
What is being shown at this time
https://imgur.com/bDqDMJC
What you want on my site
https://imgur.com/0ArCI6L
HTML:
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM destaques ORDER BY id DESC LIMIT 1;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12 col-md-6 col-lg-4" id="destaques_espaco">
<br>
<a style="display:block" href="admin_destaques.php" id="url_sem_linha">
<div id="imagem"><img src="upload/destaques/<?php echo $row['image']; ?>" class="img-fluid" id="imagem_destaque"></div>
<div id="titulo_menu"><?php echo $row['titulo'];?></div>
</a>
<br>
</div>
<?php
}
?>
CSS:
#imagem_destaque{
min-height: 250px;
max-width: 300px;
}
#titulo_menu{
max-width: 300px;
background-color:#C2C23A;
font-weight: bold;
font-size: 20px;
color: white;
line-height: 2;
padding-left: 10px;
}
#titulo_menu:hover{
color: white;
text-decoration:none;
}

Try this, it's work for me. Hopefully it will help you.
#imagem_destaque {
height: 250px;
width: 300px;
}
#titulo_menu {
max-width: 300px;
background-color: #C2C23A;
font-weight: bold;
font-size: 20px;
color: white;
line-height: 2;
padding-left: 10px;
}
#titulo_menu:hover {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-4" id="destaques_espaco">
<br>
<a style="display:block" href="admin_destaques.php" id="url_sem_linha">
<div id="imagem"><img src="https://i.ebayimg.com/images/g/lAgAAOSwWAhcFLHg/s-l300.jpg" class="img-fluid img-1" class="img-fluid" id="imagem_destaque"></div>
<div id="titulo_menu">Title</div>
</a>
<br>
</div>
<div class="col-sm-4" id="destaques_espaco">
<br>
<a style="display:block" href="admin_destaques.php" id="url_sem_linha">
<div id="imagem"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid img-1" class="img-fluid" id="imagem_destaque"></div>
<div id="titulo_menu">Title</div>
</a>
<br>
</div>
<div class="col-sm-4" id="destaques_espaco">
<br>
<a style="display:block" href="admin_destaques.php" id="url_sem_linha">
<div id="imagem"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid" id="imagem_destaque"></div>
<div id="titulo_menu">Title</div>
</a>
<br>
</div>
</div>
</div>
</body>
</html>

Here's what you can try with your <img/> tag. Hopefully, it can work for you.
Add the line below to your <img/> tag.
style="max-width: 120px; max-height: 120px"

How to put a header in between of two images on the same line (using the <div> blocks)?

I am trying to create a webpage for an imaginary pizzeria as practice. I want to insert the header of the webpage in between two images(same) such that the three(image, header, image) elements are in line. But with the code below I am getting a screen like this. How do I get them all on one line?
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div style='float:right'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<hr style='clear:both;' />
</body>

This can be done using display: flex and justify-content: space-between:
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
<div class="header">
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
</div>
I've added a container div and given it the class header and applied the flexbox to it.

You can simply do this :
header {
text-align: center;
}
h1 {
font-size: 25px;
display: inline-block;
vertical-align: top;
margin-top: 25px;
}
img {
display: inline-block;
width: 100px;
height: 100px;
margin:0 10px;
}
<header>
<img src='https://lorempixel.com/100/100/'>
<h1>Ralph's Pizzeria</h1>
<img src='https://lorempixel.com/100/100/'>
</header>
<hr>

Here's another solution if you want to continue to work with float.
Simply move the 2nd image to before the title.
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='float:right'> <!-- Just moved this up here -->
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<hr style='clear:both;'/>
</body>
However, I suggest using flex-box if you don't have to support older browsers.

inline center three image

In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}

Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>