How do I make my image on my CSS page responsive? - html

I have been trying all day to get my website to be responsive. Here is the link to it.
https://mywebsite.techgurll.repl.co
It does not look good on small screens. The image of myself I have on there keeps overflowing the container when the screens size gets smaller. Here is part of my CSS code
.img {
display: flex;
flex-direction: row;
height: 50vh;
margin-top: 20vh
}
If you would like to see the other code you can press inspect after you click my website link. I do not want to post it all here because it is a lot of code.

actually there were many problems in your css as well as in HTML so I wrote an improved version of your css and html and also made it responsive by using flexbox, media queries and units like vw and vh.
copy paste the following code.
index.html:
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Landing Page</title>
</head>
<body>
<div>
<ul>
<li><h3>megan's website</h3></li>
<li> About</li>
<li> Contact</li>
<li> Info</li>
</ul>
</div>
<div id="header">
<div class="header-content">
<h1>Hi Everyone!<br />My name is Megan. Nice to meet you!</h1>
<p>
<strong
>I am an aspiring Software Developer. I am also a student and I
study Computer Science.<br />
I will be graduating in December of 2022 with my Bachelor's
degree.<br />I hope this website impresses the right employer.<br />
I am creating this website in the hopes to be noticed and land my
dream job.<br />
I am very driven and motivated to learn.This is my passion.<br />
I do not want this job because of money.<br />
I want this job because I want to work in something I enjoy doing
everyday.<br />
That to me is happiness.<br />
I feel it is important to practice every day in order to be the best
you can be.</strong
>
</p>
<button class="button">Sign Up</button>
</div>
<div class="div-img">
<img src="x4yT5As.jpg" class="img" alt="Picture of Megan" />
</div>
</div>
<div id="title"><h2>Projects I have worked on</h2></div>
<hr />
<div class="second-container">
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png"
alt="Python Logo"
height="100"
/>
<div class="text">
Compounding Interest using Loops<br /><a
href="https://github.com/megankeyes/Compounding-Interest-with-Loops"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://www.simplilearn.com/ice9/webinar_thum_image/CPP_Tutorial.jpg"
alt="C++ Image"
height="100"
/>
<div class="text">
Shopping List Program<br /><a
href="https://github.com/megankeyes/Shopping-List"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
<div class="info">
<img
src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
alt="Python Image"
height="100"
/>
<div class="text">
BMI Calculator<br /><a
href="https://github.com/megankeyes/BMI-Calculator"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
alt="C++ Logo"
height="100"
/>
<div class="text">
Dice Game<br /><a
href="https://github.com/megankeyes/Dice-Game"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
</div>
<hr />
<div class="third-container">
<div class="quote">
<p>
<i>Your Future is Created by what you do Today<br />NOT Tomorrow</i>
</p>
<br />
<strong>-Robert Kyosaki</strong>
</div>
</div>
<div class="fourth-container">
<div class="box">
<div class="text-call">
<strong>Check out my GitHub for all of my projects!</strong>
<p></p>
<p>
Head on over to my GitHub by clicking that button right over there!
</p>
<button class="github-btn">
<a
class="call-to-action-button"
href="https://github.com/megankeyes"
>Megan's GitHub</a
>
</button>
</div>
</div>
</div>
<div class="footer">Copyright # The Odin Project 2021</div>
</body>
</html>
and style.css:
* {
margin: 0px;
box-sizing: border-box;
}
#header {
display: flex;
align-items: center;
justify-content: space-around;
background-color: darkslategray;
width: 100%;
max-width: 100vw;
}
.img {
width: 100%;
max-width: 280px;
height: auto;
border-radius: 50%;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.5vw;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 30px;
}
button {
background-color: rgb(107, 192, 226);
outline: none;
border-radius: 10px;
padding: 5px;
border: none;
cursor: pointer;
margin: 10px 0px;
width: 20vw;
}
button:hover {
background-color: cornsilk;
}
h3 {
color: white;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
font-weight: bold;
background-color: darkslategray;
color: white;
}
ul li {
padding: 10px 12px;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(107, 192, 226);
}
#title {
text-align: center;
margin: 10px;
}
.second-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100vw;
height: 95vh;
}
.info {
text-align: center;
}
.third-container {
background-color: rgb(219, 219, 219);
width: 100%;
max-width: 100vw;
height: 70vh;
font-size: xx-large;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.fourth-container {
width: 100%;
max-width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
max-width: 70vw;
height: 100%;
max-height: 60vh;
background-color: #3882f6;
border-radius: 10px;
padding: 60px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.github-btn {
margin-top: 20px;
color: rgb(107, 192, 226);
}
.github-btn a {
text-decoration: none;
color: white;
}
.github-btn a:hover {
color: rgb(107, 192, 226);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
color: white;
height: 10vh;
}
#media only screen and (max-width: 950px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
}
}
#media only screen and (max-width: 750px) {
.img {
width: 100%;
max-width: 170px;
height: auto;
padding-right: 10px;
}
.header-content {
font-size: 1.6vw;
}
}
#media only screen and (max-width: 600px) {
.img {
width: 100%;
max-width: 150px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 1.8vw;
}
}
#media only screen and (max-width: 460px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 2.2vw;
}
}
#media only screen and (max-width: 400px) {
.img {
width: 100%;
max-width: 300px;
height: auto;
}
.header-content {
font-size: 2.5vw;
}
}
#media only screen and (max-width: 320px) {
.img {
width: 100%;
max-width: 100vw;
height: auto;
}
.header-content {
font-size: 3vw;
}
}
just read and try to understand what Improvements I made and also look how I made it resposive. I hope after reading this you'll get how to add responsiveness. and adjust it according to your taste like if you want to add more css like border etc..
enjoy :)

Technically your image is already responsive, because you are using vh units. However, vh stands for viewport height, which means that your image is responsive to how tall your viewport is.
If you want it to respond to width, you can use vw units. (Same concept as vh, just using width instead of height)
Another easy method for creating responsiveness is using CSS media queries.
#media (max-width: 600px){
body {
background-color: blue;
}
}
This will make the background color of the body change to blue when the viewport is 600px or less.
You can change any CSS properties inside of there (image size, etc...), but make sure that the media query comes after the normal css styling in your css file.
You can also look into CSS Grid Layout, but there is a bit more of a learning curve down that path.
Hopefully this helps to get you in the right direction.

Related

What can i change in this HTML or CSS code to achieve the desktop design that i wanted?

I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet šŸ‘ -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>

Header image resizing HTML/CSS

I have a problem with resizing the header image so that it fits the heading size. Both the image and the heading are in the same div but I can't seem to find the solution. I had one where it looked good on the laptop, but on a smartphone, where the screen is smaller, the image was way smaller than the heading.
I tried with several height units: %, em, rem and vh, but nothing seemed to work correctly. I also tried to have a fixed div height and using object-fit with contain or size-down + max height of the image as 100%, but that also didn't work. Additionally, I am not sure about giving the div a fixed height - won't it look out of scale when viewing on various devices?
What I need is to have the home icon on the left at the same level as the heading + both having the same height, no matter what device and screen size I'm on. The heading should stay centered. Does anyone have any idea what I'm doing wrong? Below the html and css - one of many versions I checked.
Apologies if the code isn't very clean, it's only my second project.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="gallery-styles.css" />
</head>
<body>
<div id="top-row">
<a href="index.html">
<img
id="home-icon"
src="data:image/png;base64,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"
/></a>
<h1 id="header">Luna's photos</h1>
</div>
<div id="gallery">
<img src="Luna00.jpeg" />
<img src="Luna01.jpeg" />
<img src="Luna02.jpeg" />
<img src="Luna03.jpeg" />
<img src="Luna04.jpeg" />
<img src="Luna05.jpeg" />
<img src="Luna06.jpeg" />
<img src="Luna07.jpeg" />
<img src="Luna08.jpeg" />
<img src="Luna09.jpeg" />
<img src="Luna10.jpeg" />
<img src="Luna11.jpeg" />
<img src="Luna12.jpeg" />
<img src="Luna13.jpeg" />
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
background: black;
}
/* for header size visibility - remove later */
#top-row {
border: 1px solid white;
}
#home-icon {
position: absolute;
margin-left: 20px;
margin-bottom: 0;
display: block;
max-height: 100%;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
}
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
#media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
a {
color: darkgrey;
}
a:hover {
color: black;
background: darkgrey;
}
I think JithinAji answer is a good solution.
You also asked for
icon on the left at the same level as the heading + both having the same heigh
so if you prefer you can modify his code with
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content:center;
}
#home-icon {
margin-bottom: 0;
display: block;
height: 2rem;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
font-size: 2rem;
margin-left: 20px;
}
Anyway if you have problem with really narrow smartphone display you can add a #media to reduce the #home-incon height and #header font-size like
for example:
#media (max-width: 320px) {
#home-icon {
height: 1.5rem;
}
#header {
font-size: 1.5rem;
}
}
Can you check if this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="gallery-styles.css" />
</head>
<body>
<div id="top-row">
<a href="index.html">
<img
id="home-icon"
src="data:image/png;base64,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"
/></a>
<h1 id="header">Luna's photos</h1>
</div>
<div id="gallery">
<img src="Luna00.jpeg" />
<img src="Luna01.jpeg" />
<img src="Luna02.jpeg" />
<img src="Luna03.jpeg" />
<img src="Luna04.jpeg" />
<img src="Luna05.jpeg" />
<img src="Luna06.jpeg" />
<img src="Luna07.jpeg" />
<img src="Luna08.jpeg" />
<img src="Luna09.jpeg" />
<img src="Luna10.jpeg" />
<img src="Luna11.jpeg" />
<img src="Luna12.jpeg" />
<img src="Luna13.jpeg" />
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
background: black;
}
/* for header size visibility - remove later */
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content: flex-start;
}
#home-icon {
/* position: absolute; */
margin-left: 20px;
margin-bottom: 0;
display: block;
height: 4rem;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
font-size: 2rem;
margin-left: 20px;
}
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
#media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
a {
color: darkgrey;
}
a:hover {
color: black;
background: darkgrey;
}
You can solve your problem with these changes:
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content: center;
}
#home-icon {
margin-left: 20px;
margin-bottom: 0;
display: block;
height: 40px;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
margin-left: 20px;
}

Viewport Meta Tag ruins CSS

I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didnĀ“t made the cassette img responsive, because you gave him a px size, then the img canĀ“t resize, itĀ“s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, itĀ“s better to work with "em" or "rem", because they are relative sizes.
Then, i donĀ“t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think thatĀ“s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.

(HTML CSS) trying to make certain div responsive

I made 2 divs inside container div, and I gave them the element inline block, I wanted them to be side by side. like 1 > 2, not on top of each other.
they look great in my screen size (24inch)
but once the screen size is going down, instead of getting smaller the divs will lay on top of each other
could you help me making them responsive?
html
<div class="exampleboxcontainermainpage">
<div class="exampleboxmainpage">
<h1>create social media Buttons with html and css</h1>
<br>
<div class="socialmediacontainer">
</div>
<br />
<br />
<br />
<br />
<br />
<br>
</div>
<div class="exampleboxmainpage2">
<div class="exampleinsideboxmainpage">
<pre class="prettyprint default">
<!-- Start of showing code -->
<xmp>
<div class="socialmediacontainer">
</div>
</xmp>
<!-- !!!!! End of showing Code !!!!!-->
</pre>
</div>
<button onclick="window.location.href = 'tryyourselfcodes/howto_howto_social_button.php'; " style="left:30px;" class="buttontest">
Try yourself >>
</button>
</div>
</div>
css
.exampleboxcontainermainpage{
padding-left:100px;
}
.exampleboxmainpage {
background-color: #f3f4fa;
border-style: unset;
/* padding: 23px; */
text-align: center;
width: 800px;
height: 400px;
position:relative;
display: inline-block;
bottom:24px;
}
.exampleboxmainpage2 {
background-color: #f3f4fa;
border-style: unset;
padding: 31px;
text-align: center;
width: 900px;
height: 400px;
position:relative;
display: inline-block;
}
.exampleboxmainpage h3 {
padding-bottom: 10px;
display: inline-block;
}
.examplebox button {
display: inline-block;
text-align: center;
}
.exampleinsideboxmainpage {
background-color: black;
text-align: center;
width: 700px;
display: inline-block;
border-style: unset;
}
.exampleinsideboxmainpage p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: white;
overflow-wrap: break-word;
display: inline-block;
}
Welcome to SO!
Try to use flex as its responsive and easy to use
And on break-screen(below 767px mobile) i just change its direction to
column from row
* {
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
flex-flow: row wrap;
}
[class*="box--"] {
display: flex;
margin: .25rem;
height: 2rem;
padding: .25rem;
color: white;
}
.box--half {
background: blue;
flex: 1 1 30%;
}
#media all and (max-width: 767px) {
.container{
flex-direction: column;
}
}
<div class="container">
<div class="box--half">1</div>
<div class="box--half">2</div>
</div>
Read more about flex here
If you resist to use inline display instead advanced one like flex or grid you can use media queries to show your div under each other in smaller screen, for example I use 800px for breakpoint. You can use display: block:
.container>div {
display: inline-block;
width: 200px;
height: 200px;
background: gray;
text-align: center;
line-height: 200px;
}
#media all and (max-width: 800px) {
.container>div {
display: block
}
}
<div class="container">
<div>Content 1</div>
<div>Content 2</div>
</div>

Creating a responsive image for a section

I'm sure I have made some kind of really obvious stupid mistake here but it's been bugging me for a while now and I just cannot figure it out no matter where I look.. I am just practicing with a very basic, boring site and I need the image to be responsive in the section underneath the header, but for some reason no matter what I do, I just can't get it to work.
Sorry if this has been answered, I had a look and couldn't find anything exactly the same. If anyone could shed some light on this for me I would be very appreciative. Thanks in advance.
HTML:
<html>
<body>
<header>
<div class="container">
<div class="brand">
<img class="brandImg" src="https://photos-1.dropbox.com/t/2/AACo_XuN80WW6m3RltLuUDD-Koivyw205OCV55h43hevVQ/12/184045382/png/32x32/1/_/1/2/network.png/EKPi4YsBGMICIAIoAg/u6N5dEYvNDRNysVhT6Arx-eKOa64tOkilzRp8K3e93Y?preserve_transparency=1&size=1600x1200&size_mode=3" alt="Brand Image">
<h3 class="mainTitle">Network Solutions</h3>
</div>
<nav>
<ul class="navBar">
<li>About |</li>
<li>Portfolio |</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="heroImg">
<div class="container">
</div>
</div>
</section>
</body>
</html>
CSS:
/* MAIN STYLES */
.container {
max-width: 60%;
margin: 0 auto;
}
/* HEADER */
header {
height: 100px;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.brand {
float: left;
display: inline;
margin-top: 20px;
}
.brandImg {
height: 4em;
width: 4em;
float: left;
margin-bottom: 5px;
}
.mainTitle {
font-family: 'IBM Plex Mono', monospace;
line-height: 1.2em;
position: relative;
left:8px;
top: -5px;
}
/* MAIN NAVIGATION */
ul {
float: right;
}
li {
margin-top: 15px;
float: left;
display: inline;
font-size: 40px;
padding-left: 15px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: gray;
}
/* HERO SECTION */
#showcase {
width: 100%;
height: 100%;
}
.heroImg {
background-image: url("https://photos-1.dropbox.com/t/2/AADgiVKPX---q_yzz3R6QXjMuvUF9x1suRGMjLMV8QkZVQ/12/184045382/jpeg/32x32/1/_/1/2/hero.jpeg/EKPi4YsBGMICIAIoAg/-UTK8zUqda_wA3F-VrZAdIZvo84OHHGWCbLEcdCi1K8?size=1600x1200&size_mode=3");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Codepen link
The logo image in your pen is throwing a 403 error. Generally speaking, you can make an image responsive with the following CSS:
img {
display: inline-block;
max-width: 50px; /* Width of your image */
max-height: 50px; /* Height of your image */
width: 100%;
height: auto;
}
Here is a JSFiddle example. Drag the window to see how the image reacts.
img {
display: inline-block;
max-width: 650px;
max-height: 250px;
width: 100%;
height: auto;
}
<img src="http://via.placeholder.com/650x250" alt="Stack Overflow Test Image" />
Here's another example using Flexbox making the image responsive relative to another element:
#test {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
img {
display: inline-block;
max-width: 250px;
max-height: 150px;
width: 100%;
height: auto;
}
h1 {
margin-left: 15px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
<div id="test">
<div id="logo">
<img src="http://via.placeholder.com/250x150" alt="Stack Overflow Test Image" />
</div>
<h1>This is a Test Title</h1>
</div>