Creating responsive images in a navbar with HTML and CSS

I need help with this code snippet:

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <div class="d-flex flex-row justify-content-center align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="width:12%;height:auto; float: left;">
          <h1 style="color: #89216b; float: right; margin-top: auto; margin-bottom: auto; font-size: all;">Trendings</h1>
        </a>
      </div>
    </div>
  </nav>
</div>

Everything works perfectly except for the image size on mobile devices. The image appears small while the text remains the same size. I want to ensure that the image does not appear small on mobile.

javascripthtmlcssbootstrap-4

Answer №1

By using width:12% on the img element, it automatically resized the image smaller. To avoid this, I recommend removing that code and replacing it with the following:

.navbar-brand{
  width:100%;
  height:auto;  
}
.img-logo{
  max-width:100%;
  height:auto;
  object-fit:cover;
}

Additionally, in your HTML code, I have removed the width and height styles:


<img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="float: left;">

Answer №2

It looks like you are utilizing a css framework based on the classes such as d-flex flex-row etc in your code.

If that's the case, why not avoid using inline styling? If you do need to style something, consider editing the image like this:

.img-logo {
 width: 100%;
 height: auto;
 max-width: 100px;
}

You can also use inline styling like this:

<img class="img-logo" src="img" alt="" loading="lazy" style="
    width: 100%;
    height: auto;
    max-width: 100px;
">

The example uses 100px but feel free to adjust the size according to your needs. This will ensure that your image looks good regardless of its size.

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

Tips on utilizing HTML tags in shiny context to highlight or potentially enlarge the font size for sprintf使

Can anyone help me figure out how to bold or increase the font size for my sprintf in R? I attempted the code below but it didn't work as expected. Instead of bolding the text, the "<strong" tags became part of the label. Any suggestions on how to ...

htmlrshiny

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

Not being a seasoned Javascript coder or very familiar with JSON, my approach may seem naive. Any recommendations for better solutions are appreciated. Below is the code I've written: <!DOCTYPE html> <html> <head> <script& ...

javascriptjsonfor-loopindexing

Efficiently incorporate a set of fields into a form and automatically produce JSON when submitted

The optimal approach for dynamically adding a set of fields and generating JSON based on key-value pairs upon form submission. <div class="container"> <div class="col-md-4"> <form method="POST" id="myform"> <div class="f ...

javascriptarraysjsonforms

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

Transferring elements from one array to multiple arrays

I have been working with the basics of JavaScript arrays and here is my code snippet: let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B&apos ...

javascriptarraysjson

Using Font Color in Gmail HTML Emails

While working on styling an HTML email, I've encountered an unexpected issue with inline CSS in Gmail. I set the color of text in a table row using the following code: <tr style='color: #000; font-size: 14px; font-family: Verdana, serif;' ...

cssgmailhtml-email

Using values from a select menu in a math calculation without including a decimal point

I am working with a dropdown menu that contains various values... <select id="number1a" onChange="Addition()"> <option value="0" selected>-</option> <option value="10">10</option> <option value="7.5">7.5</optio ...

javascriptjquerymath

Error: We are facing an issue with new.mongoose.Schema as it is not functioning properly and

I am experiencing an issue with my product.js file. It keeps throwing an error about an unidentified identifier, and whenever I try to fix one problem, another one pops up. I have been struggling to locate the root cause of this error. ...

javascriptnode.jsnpm

The compatibility between json_encode and JSON.parse is not seamless

I am encountering a situation on my PHP page where I am using json_encode and getting the following output: {"id":"761","user":"Moderator","message":"test"} {"id":"760","user":"Patrick","message":"test"} My goal is to parse these values using JSON.parse ...

javascriptphpjson

The function getattribute() on the edge is malfunctioning and returning a null value

Has anyone encountered issues with the getAttribute() function while creating an extension for Edge? I am currently facing a problem where it is not returning the attributes of the element that I am searching for. This is what my code looks like on Edge a ...

javascriptmicrosoft-edgemicrosoft-edge-extension

Struggling with adding two-digit numbers in a JavaScript calculator

While I can add single digits with no problem, adding double digits proves to be a bit tricky. The split method in this if statement is useful for isolating individual numbers, but it struggles when dealing with double digit numbers. if(e.value == '= ...

javascripthtmlcsscalculator

Tips for showcasing server side validation error messages on a form using AngularJS

Utilizing AngularJS and Spring MVC in my current project, I am sending JSON to a rest controller for field validation. In the event of a validation failure, an Error object is returned containing details such as: {"validationErrors":[ { "error ...

javascriptangularjsspringjspspring-mvc

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline

Limiting jQuery searches to a specific region: Tips and tricks

If I have the code snippet below: <div class="foo"> <div> some text <div class="bar"> </div> </div> </div> <div class="foo"> <div> some text <div class="bar"> some text </div> </div> </ ...

javascriptjqueryhtmlparsingtags

Closing the Material UI dialog from an inner component

In my application, I have implemented a sign-in dialog using Material UI. However, I have separated the login button into its own component. I am trying to figure out how to close the dialog when the submit button in the SigninForm component is clicked. I ...

javascriptreactjsmaterial-uidialogmodal-dialog

Issues with CSS rendering have been encountered on the Facebook page

I'm experiencing an issue with the rollover CSS on Facebook's rendering engine. I'm not sure if I made a mistake in my code or if there are limitations with certain CSS properties on custom Facebook pages. Here is the code I am using: <l ...

htmlcssfacebookfbml

How can you utilize a computed property in a Vue component to select all the text within it?

When using $event.target.select(), I usually can select all the text. However, in this scenario, it seems to be selecting everything and then replacing the selection with the computed property. How can I select all after the computed property has finished? ...

javascriptvue.js

Difficulty with Vue.js updating chart JS label names

I have been working with Vue JS and implementing a chart in my single page application. However, I am encountering difficulties updating the Legend and despite numerous attempts and searches, I am unable to get it to update. Any assistance in correcting my ...

javascripthtmlvue.js

Error in Heroku deployment - Express and React app displaying a white screen

I am encountering a challenging situation as I attempt to understand the issue at hand. Following the deployment of my React/Express application on Heroku, the build and deployment proceed without errors, but the React frontend appears blank. The browser ...

javascriptnode.jsreactjsexpressheroku

Selecting the quartile value for every individual data point

I am currently graphing the sentiment values of tweets over a span of 10 years. The CSV file contains three columns as outlined below. Successfully, I managed to plot each value by date. However, upon attempting to create an area graph, I encountered an i ...

javascriptd3.jsdata-visualization