When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser.

.extension {
    display: table;
    padding: 50px 0px 50px;
    width: 100%;
    height: auto;
    color: #fff;
    background-color: #558C89;
    background-size: cover;
    font-size: 22px;
    font-weight: 200;
    margin: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

# extension img {
    width: 350px;
    height: 275px;
    position: absolute;
}

footer {
    padding: 50px 0;
    height: auto;
}
<section id="extension" class="extension">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-8">
                <h1>Download Our Extension</h1>
                <p>extension
                </p>
                <a href="http://www.google.com/" class="btn btn-lg btn-dark" target="_blank">Download Extension</a>
            </div>
            <div class="col-6 col-md-4">
                <img src="img/iMacricket.png">
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>
<footer id="contact">
    <div class="container">
        <div class="row">
            <div class="span9">
                <div class="title-page">
                    <h2 class="title">Get in Touch</h2>
                    <hr class="small">
                    <h3 class="title-description">We are continually<br/>
                                </h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 col-md-8">
                <form id="contact-form" class="contact-form" action="#">
                    <p class="contact-name">
                        <input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
                    </p>
                    <p class="contact-email">
                        <input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
                    </p>
                    <p class="contact-message">
                        <textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
                    </p>
                    <p class="contact-submit">
                        <a id="contact-submit" class="btn btn-lg btn-dark" href="#">Send Your Email</a>
                    </p>
                </form>
            </div>
            <div class="col-6 col-md-4 text-center">
                <h2>Contact Us</h2>
                <hr class="small">
                <ul class="list-unstyled">
                    <li><i class="fa fa-envelope fa-fw"></i> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99798949cb99c81989489959cd79a9694">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e4f2f5c1e6ece0e8edafe2eeec">[email protected]</a></a>
                    </li>
                </ul>
                <br>
                <ul class="list-inline">
                    <li>
                        <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
                    </li>
                </ul>
                <hr class="small">
            </div>
        </div>
        <br/>
        <p class="text-muted">Copyright &copy; 2017 - Designed &amp;</p>
    </div>
    <a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>

I attempted to set the height:auto, and resize the image but faced some challenges.

javascriptjqueryhtmlcss

Answer №1

Assign the class "img" to the img attribute and apply the following style:

<div class="col-6 col-md-4">
    <div class="img">
      <img src="img/iMacricket.png">
    </div>
</div>

Style

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

Answer №2

To ensure responsiveness on all devices, it is recommended to adjust the width and height properties of the image. You can set the width to max-width: 350px; and the height to max-height: 275px;. Additionally, replacing the width and height values with 100% will allow the image to adapt fluidly across different screen sizes.

#extension img {
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 275px;
  position: absolute;
}

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

Having trouble running classes using Maven test with the Testng.xml file in the terminal, however, it runs smoothly in Eclipse

While I have been successful in running my solution through the testng suit in the Eclipse console, I am facing difficulties executing the testng.xml file via Maven integrated with Sauce Labs in the terminal. Output received on the terminal: ------------ ...

javascriptseleniumselenium-webdrivermaven-2saucelabs

CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends a ...

htmlcss

The page is present, but unfortunately, the content is displaying a 404 error. I am considering using Selenium to retrieve

Is there a way to use Selenium webdriver to download images from a dynamically updated website, like this site? Every day a new page is created with images uploaded around 6 pm. How can I retrieve these images using Python and Selenium? url = 'http:/ ...

pythonhtmlseleniumselenium-webdriver

Customize Monaco Editor: Implementing Read-Only Sections

I am currently working on setting up the Monaco Editor so that specific sections of the text content are read-only. Specifically, I want the first and last lines to be read-only. See example below: public something(someArgument) { // This line is read-onl ...

javascripttypescriptmonaco-editorvisual-studio-monaco

What is the process for storing a particular model in a designated collection within MongoDB's database?

I am working with three different models: user, teacher, student. All of these are stored in the database under the users collection. However, I want to save the student model in its own separate collection called students, instead of mixing it with the us ...

javascriptnode.jsmongodbexpressmongoose

Program that duplicates text to clipboard upon clicking on the text

Hey there, I have a query regarding the script provided below: function copyElementText(id) { var text = document.getElementById(id).innerText; var elem = document.createElement("textarea"); document.body.appendChild(elem); ...

javascripthtml

Using Angular to retrieve JSON data from a static file

Currently, I am attempting to implement this AngularJS example from a tutorial on Login Tutorial Example. Instead of storing the username and password as simple strings, I am trying to retrieve them from a local file. I understand that this may not be the ...

javascriptjqueryangularjsjson

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Using either Java or Groovy, iterate through a hashmap and showcase an HTML table within a Velocity template

Just a heads up: Some users may have trouble reading code comments. For the record, this is not related to any homework assignment. I'm attempting to combine HTML and a hashmap for the first time. Despite searching for explanations online, nothing see ...

javahtmlgroovyhashmapvelocity

React: Perform edits and deletions through a convenient pop-up menu for each item in a list

In my project, I have a list container component that acts as the parent and maps out the list rows. Each list row component, which is the child, contains an item with buttons to toggle a pop-up menu. This menu has options for editing and deleting the item ...

javascriptreactjsmaterial-ui

NodeJS function does not pause for the PostgreSQL database call despite using await keyword

I am attempting to recursively insert entries into the database where each entry depends on the previous one (the ID of the previous entry will be the child_id of the next entry). However, I am facing difficulties in getting async/await to work correctly. ...

javascriptnode.jspostgresqltypescriptexpress

Having difficulty executing the .exec() method of the nodejs simple-ssh module

I am currently using npm's simple-ssh library to establish a connection with a remote host as the root user. I have an additional superuser account named serviceUser. My objective is to switch to this user by running su serviceUser (Note: su service ...

javascriptnode.jsnpm

The specified method is not recognized as a function in the ReactJS library

Within my reactJS application, there is a function that calls upon a helper function to retrieve the result of a calculation. The component looks like this: import React, { Component } from "react"; import * as d3 from "d3"; class DrawImage extends Comp ...

javascriptreactjs

I am looking to save a collection of variables in an array and store it as a $_SESSION variable

Looking to store an array of variables as a $_SESSION variable in order to use it in another .PHP file and perform operations with it. The array: <script> var idArray = [18, 28, 31, 38, 41]; </script> What I attempted, but didn't suc ...

javascriptphpjqueryjson

PHP method that invokes HTML code

I recently developed a registration and login system using object-oriented PHP. I am now looking to make the HTML code accessible from within a PHP method. Below is the View.php class that contains methods for creating the login and registration UI: < ...

phphtml

Issue with filtering of values returned by functions

I've been working with Angular's currency filter and I've run into an issue. It doesn't seem to be filtering the data that is returned from a function. I have a feeling that I might be missing something, perhaps it has to do with how th ...

javascriptangularjsangular-filters

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

cssreactjstailwind-csscss-position

Pagination activates on the second tap

Check out my example on jsFiddle: https://jsfiddle.net/0se06am5/ class Pagination extends React.Component { constructor(props) { super(props); this.state = { current: 1 }; this.items = ['a', 'b', 'c&ap ...

javascriptreactjs

Integrating image transitions into JavaScript

Could you provide guidance on how to create buttons from the three images within the "fadein" div in order to navigate directly to a specific jpeg? Currently, the three jpgs are displayed in a continuous loop. Thank you. ...

javascriptcssimagehtml

Best Practices for Organizing Image and JavaScript Files in Your Project

Currently, I am working on a project in Eclipse and I'm unsure about the proper location to store my image files and JavaScript files. Can anyone provide guidance on this matter? Thank you. ...

javascriptimageproject