I had 2 Div , 1 for image and 1 for heading. I had set different font size as per different media query in CSS file. Although its working while shrinking the width but heading is not breaking in 2 lines and when breaking in 2 lines the header div comes below to 1st div which should be side by side. its not wrking properly. Please help. Note: The image has 130x130 pixels.
My Codes including CSS:
<!-- login.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta chaviewportrset="utf-8">
<meta name="" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/BOOTSTRAP/CSS/bootstrap.min.css">
<!-- fontawsome icon library -->
<!-- <link rel="stylesheet" href="/BOOTSTRAP/FontAwsome/css/all.css"> -->
<!--link own style css -->
<link rel="stylesheet" href="/MyCss/MyStyle.css">
<!-- <link rel="stylesheet" href="/MyCss/test.css"> -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="BOOTSTRAP/JS/code.jquery.com_jquery-3.3.1.slim.min.js"></script>
<script src="BOOTSTRAP/JS/cdn.jsdelivr.net_npm_popper.js@1.14.3_dist_umd_popper.min.js"></script>
<script src="BOOTSTRAP/JS/cdn.jsdelivr.net_npm_bootstrap@4.1.3_dist_js_bootstrap.min.js"></script>
<style>
@font-face {
font-family: Britannic Bold;
src: url(/BOOTSTRAP/fonts/BRITANIC.TTF);
font-family: Broadway;
src:url(/BOOTSTRAP/fonts/BROADW.TTF);
font-weight: bolder;
font-family: lucida calligraphy;
src:url(/BOOTSTRAP/fonts/LCALLIG.TTF);
}
#logo-img{
display: block;
/* align-items: center; */
position: inherit;
/* margin-left: 4%;
float: left; */
}
#logo-heading{
display: inline-block;
font-family:Britannic Bold;
width: 100%;
font-weight: 800;
color:transparent;
background-image: url(/BOOTSTRAP/img/bg-image-multi-color-gradient3.jpeg);
background-size: cover;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
margin-left: 0%;
}
/* MEDIA QUERY */
span { font-size: 1.5rem; }
@media (min-width: 576px) {
span { font-size:1.25rem ;}
}
@media (min-width: 768px) {
span { font-size: 1.5rem; }
}
@media (min-width: 992px) {
span { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
span { font-size: 2.2rem; }
}
</style>
</head>
<body>
<Title>login.html</Title>
<!-- jQry to call heml file -->
<!-- <script src="/JS/jquery-3.6.0.min.js"></script> -->
<!-- <script src="/JS/include-html.min.js"></script> -->
<!-- header file : "header2.html" -->
<!-- <div include-html="header2.html" id="header2"></div> -->
<!-- xs<576 ! 576<sm<768 ! 768<md<992 ! 992<lg<1200 ! <1200<xl -->
<!--kept img and text in same div but not resposive -->
<!-- ********************************************** -->
<!-- img & text in one div -->
<!-- <div class="container p-0">
<div class="row">
<div class="col-md-12 p-0" style="border: .01cm red solid; ">
<img id="logo-img" src="/BOOTSTRAP/img/am-logo2-white-bg-117x122.jpg" height="85vm" >
<span id="logo-heading">Arihant Mandal</span>
</div>
</div>
</div> -->
<!-- img & text in Two div but very alignment of text imporper when xs screen-->
<!-- *********************************************************************** -->
<div class="container p-0">
<div class="row">
<div class="col-xs-1 p-0" style="border: .1cm blue solid;">
<img class="img-fluid" id="logo-img" src="/BOOTSTRAP/img/am-logo2-white-bg-117x122.jpg" height="85vm" >
</div>
<div class="col-xs-11 p-0" style="border: .01cm red solid; text-align:center;">
<span id="logo-heading">Arihant Mandal</span>
</div>
</div>
</div>
You have a small mistake in your meta tag.
<meta name="" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Name attribute is empty. Value should be viewport.
Here is code snippet with working code
@font-face {
font-family: Britannic Bold;
src: url(/BOOTSTRAP/fonts/BRITANIC.TTF);
font-family: Broadway;
src: url(/BOOTSTRAP/fonts/BROADW.TTF);
font-weight: bolder;
font-family: lucida calligraphy;
src: url(/BOOTSTRAP/fonts/LCALLIG.TTF);
}
#logo-img {
display: block;
/* align-items: center; */
position: inherit;
/* margin-left: 4%;
float: left; */
}
#logo-heading {
display: inline-block;
font-family: Britannic Bold;
width: 100%;
font-weight: 800;
color: transparent;
background-image: url("https://cdn4.buysellads.net/uu/1/134955/1685040267-designdotdev5.jpg");
background-size: cover;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
margin-left: 0%;
}
/* MEDIA QUERY */
span {
font-size: 1.5rem;
}
@media (min-width: 576px) {
span {
font-size: 1.25rem;
}
}
@media (min-width: 768px) {
span {
font-size: 1.5rem;
}
}
@media (min-width: 992px) {
span {
font-size: 1.75rem;
}
}
@media (min-width: 1200px) {
span {
font-size: 2.2rem;
}
}<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>login.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
</head>
<body>
<div class="container p-0">
<div class="row">
<div class="col-sm-4 p-0" style="border: 0.1cm blue solid">
<img class="img-fluid" id="logo-img" src="https://cdn4.buysellads.net/uu/1/134955/1685040267-designdotdev5.jpg" height="85vm" />
</div>
<div class="col-sm-8 align-items-center d-flex" style="border: 0.01cm red solid; text-align: center">
<span id="logo-heading">Arihant Mandal</span>
</div>
</div>
</div>
</body>
</html>