How to make my logo and h1 element mobile responsive - html

Question

This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive. This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive.
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
#media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
#media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}

Answer 1

You can use bootstrap image responsive class.
<img src="images/logo.png" alt="logo" class="img-responsive"/>
And for H1 tag you can use media query to make it responsive font size.
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" />
<h1>Logo Goes here</h1>
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
Make sure the media query css should be below the main css then it will work, Sequence is matter.
Hope this helpful.

Answer 2

/*Desktop responsive*/
.logo-img {
width: 260px;
}
h1 {
font-size: 58px !important;
line-height: 80%;
margin-top: 10px;
}
/* Mobile Phone Responsiveness */
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 9px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 8px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 160px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
<!DOCTYPE html>
<html lang="sh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Frigo MMB</title>
</head>
<body>
<!-- header -->
<div class="container">
<div class="row top-row">
<div class="col-md-6">
<img src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png" alt="logo img" class="logo-img">
</div>
<div class="col-md-6">
<h1>Hladjenje & <span style="color: #5d75ab">Klimatizacija</span></h1>
<h2>011.8525636 | 063.7591345</h2>
</div>
</div>
</body>
</html>
May some of the existing code overwriting your h1 tag so i have added !important it will help overwrite the other h1 class.
Hope this snippet will help you.

Answer 3

You can try something like this, if image have width of 400px, then use:
#media screen and (max-width: 400px) {
img {
width: 100%;
}
}
You may need to use different selector for img, same that set the width in your other CSS if you set it.
With header you can put it above the image if it's next to image on desktop.