Bootstrap 4 did not achieve the desired responsiveness for the image and h1 element

I am having trouble with my two Div elements, one for an image and one for a heading. I have set different font sizes based on different media queries in my CSS file. While it works when shrinking the width, the heading does not break into two lines. Additionally, when it breaks into two lines, the header div moves below the 1st div instead of being side by side as it should be. It seems to not be working properly. Any assistance would be greatly appreciated. Please note that the image is 130x130 pixels.

Below are 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">
  <!-- Optional JavaScript -->
  <script src="BOOTSTRAP/JS/code.jquery.com_jquery-3.3.1.slim.min.js"></script>
  <script src="BOOTSTRAP/JS/pop
htmlcssbootstrap-4

Answer №1

You've made a slight error in your meta tag.

<meta name="" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The Name attribute is empty. The value should be viewport.

Here's the corrected code snippet

@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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4e544a544a">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using bootstrap margins at specific breakpoints for optimal spacing

Looking to exclusively add a bootstrap margin on extra small and small devices. I added mt-4 mt-sm-4 to target only extra small and small devices. However, I noticed the margin is still applied on larger desktop devices, so I had to reset the margins with ...

bootstrap-4

Is it feasible to add a row in bold font following every set of 10 rows written in regular text?

Looking for a way to implement pagination on a table with dynamic headers? I am using rows with font-weight:bold to act as headers for the pagination. Is it possible to insert a row with font-weight:bold every 10 rows? I am unsure of how to achieve this, ...

htmljqueryjsonasp.net-mvc

Displaying a variable within a label utilizing the syntax <%= %>

I have a string variable in the code behind and I want to display it in an HTML label. I am aware that I can control the label using ASP.NET like this: label.Text = stringVariable; However, I would like to use <%= %>, so here is what I have tried: ...

htmlasp.net

Is there a way to automatically click the 'next' arrow on my image slider?

I'm currently working on a website that uses the Semplice theme in Wordpress. The built-in slider doesn't have an autoplay feature, so I attempted to use jQuery to automatically click the 'next' arrow every 5 seconds. However, I ran int ...

jqueryhtmlcsswordpress

jQuery effects failing to run properly in Internet Explorer

<script type="text/javascript" src="css/jquery-1.7.1.js"></script> <script type="text/javascript"> function slidedown(id){ $('#rerooftext').hide(0); $('#inspectiontext').hide(0); $('#remodelingtext').hid ...

javascriptjqueryhtml

What is the best way to choose all the checkboxes in a checkbox list, such as a ToDo List?

I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked ...

javascripthtmlcssaddeventlistener

What is the process for adjusting the maximum value on my progress bar?

Currently, I am working on a progress bar that is dynamically updating based on predefined variables. Everything seems to be functioning correctly, except for one issue I am facing. When the value of my progress bar reaches the maximum value, there is stil ...

phphtmlcssbootstrap-4

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

The Guide to Utilizing Autonomous Models in Directive

Hey there! I have a question regarding a radio button directive. In this directive, I pass a model for the collection that will be set to the selected radio button. var app = ChartsModules.getInstance().getModule("amkaiCharts.directives"); ...

htmlangularjsangularjs-directive

Modifying iframe elements dynamically across domains

I am faced with the challenge of embedding an iframe form from a web application that I use onto my website. This custom inquiry form is integrated into my diary within the web app, and now I want it to be displayed on my main website while maintaining a c ...

javascripthtmlcssiframe

html_attr doesn't include the 'href' attribute

As a complete novice in the world of web scraping, I am diving into the process headfirst. Currently focusing on this particular website, my goal is to extract links leading to discussions about specific episodes. Using SelectorGadget, I successfully isol ...

htmlrweb-scrapingrvest

What is the process for creating instant notifications using AJAX, PHP, and MySQL?

I am looking to implement real-time notifications on my website and have already set up the notification bar: <div class="alert alert-info alert-with-icon" data-notify="container"> <button type="button" aria-hidden="true" class="close"> ...

javascriptphphtmlmysqlajax

Extracting information from a database (HTML, JavaScript)

I am currently working on a table that receives data from the server using ajax: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +d ...

javascriptjqueryhtmlajaxjson

Guide to making a dynamic image map with interactive links using HTML and CSS

Seeking advice on how to create clickable areas within an image that lead to different pages on my website. Image maps seem like a good solution, but the issue is that they require specific coordinates which may not work well for responsiveness. I was hop ...

htmlcssimagemap

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

javascriptcssreactjsmouseeventsettimeout

Click on the link to open in a new tab and redirect the current window to a different website

Currently, my form action is set to "_blank" in order for the pdf document I am generating to open in a new tab/window. While this works correctly, I am looking to also have the original page redirect to a different URL simultaneously. Are there any ways ...

javascripthtmlhttp-redirect

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so ...

cssangular-materialangular7virtualscrollangular-cdk-virtual-scroll

Failure to respond to dual part form by RemoveClass

Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...

javascriptjqueryajaxcss

Obtaining data from a website with Java: A step-by-step guide

I am trying to retrieve the SIC Code from the following URL: . However, when I run my code, I encounter the following error: public static void main(String[] args) { try { Document doc = Jsoup.connect("http://www.manta.com/c/mx4s4sw/bowflex-ac ...

javahtmlcss