Resolving the Issue of CSS Image Overlapping Text on Mobile Devices

I'm facing a CSS issue regarding the positioning of an image on small screens. The image is not responsive and I've tried using position:relative; and adjusting margins manually, but it hasn't resolved the problem.

Below is my HTML Code:

<div id="home-product-slider" class="home-section" style="display:none;">
<div class="col-sm-8 col-sm-offset-2">
    <div class="row mini-product-wrapper">
        <div class="col-sm-12">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/home_product_glasku_capuccino.png" alt="" class="img-responsive img-home-product ihp-thumb">
        <div class="product-box" style="margin-top:200px">
            <div class="product-hero-box text-left">
                <h4 style="color:white;">
                    <br/>GLASKU CAPPUCINO<br/>
                </h4>
                <div class="product-box-text">
                    <p>Glasku Cappuccino comes in a 165ml pack with various coffee flavors at an affordable price without compromising on quality. It's practical and refreshing to enjoy.</p>
                    <a href="/index.php/our-products/glasku/#0" class="small" style="color:white;">Read more >></a>
                </div>
            </div>
        </div>
      </div>
    </div>
</div>

And here is my CSS:

#home-product-slider .img-home-product.ihp-thumb { width: 45%; position: absolute; top: 0;right: 0;}

Thank you!

cssimagetwitter-bootstrapposition

Answer №2

In order for images to adapt to different screen sizes, ensure that you set max-width: 100% and height: auto for the image

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

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

javascripthtmlcssgoogle-chromeinternet-explorer

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

Enhancing Images through Rotation and Advanced Character Recognition Technologies

Good day everyone, Today, I want to discuss the topic of "Image Manipulation in C++". Until now, I have successfully removed noise from images and converted them to black and white. However, I now have two questions. Question One: Take a look at the ...

c++imageimage-processingcaptcha

What causes the lack of upward movement for a div element when the div above it is floated to the left?

Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...

htmlcsswebcss-float

Crop box overlaying video background

Utilizing jCrop to establish a crop region for a video element. My goal is to make the video section within the crop area fill a container with identical proportions, but I'm encountering challenges with the mathematical calculations. The sizes of th ...

javascriptjqueryhtmlcsshtml5-video

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

htmlcss

Tips on aligning vertically centered left and right floating objects without having to use the line height property

          Here is the issue I am facing http://jsfiddle.net/vT4YT/ <table><tr><td><div></div><div></div></td></tr></table> You can see that the options and row text are not vertic ...

htmlcsscss-floatvertical-alignment

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

javascriptjqueryhtmlcss

Parallax scrolling in all directions

Is there a resource available for learning how to program a website similar to the one at ? I am familiar with parallax but can't seem to find any examples that resemble what they have done on that site. ...

javascripthtmlcssparallax

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

What is the best way to align a single item to the right on the navbar in Bootstrap 5.3 (v5.3.0-alpha1)?

Attempting to position a dropdown link to the right in my Bootstrap 5.3 navbar proved to be challenging. The method that worked with Bootstrap 3, using navbar-right, and with Bootstrap 4, possibly ml-auto, did not work with Bootstrap 5 beta which uses me-a ...

htmltwitter-bootstrapbootstrap-5

How to retrieve the index upon clicking in Javascript

In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract add ...

javascriptcss

Browser prioritizes Bootstrap over custom CSS styles

I've organized my stylesheet directory like this: stylesheets bootstrap.min.css style.css Within my style.css file, I've made adjustments to the pre tag styling: pre { background-color: #d9edf7; border: #d9edf7; color: navy ...

htmlcsstwitter-bootstrapgoogle-chromestylesheet

What are some best practices for integrating CSS grid layouts with React for optimal results?

My current project involves developing a Single Page Application using ReactJs and CSS grid layouts for styling components. However, I've encountered an issue where the two technologies do not seamlessly integrate: CSS grid layouts are typically appli ...

cssreactjssingle-page-application

Accordion in Bootstrap 5.3 behaving independently of data-bs-parent

I am currently working on designing an accordion feature where the headers are displayed in a column on the left side, and when expanded, the content appears in a column on the right side. Everything is working perfectly except for the fact that I have t ...

javascriptcssdjangobootstrap-5

Maintaining consistent height across all elements in a column while preserving margin: a guide

My query revolves around filling the contents of two columns with different heights within a row. Although the columns themselves are of equal height, the cards inside them are not. +---------------------------+---------------------------+ | +------------- ...

htmlcssbootstrap-5

Finding the Right Spot to Edit HTML Code in Microsoft Dynamics CRM

Is it possible to change the width of a custom iframe in Microsoft Dynamics CRM that is currently set at 1900px? <div id="mainContainer" class="classname_here" style="max-width: 1900px"> I was able to change it to 100% using a browser extension. Ca ...

htmlcssiframedynamics-crm

Firefox displays text smaller than Chrome

Hey there! I'm facing a little issue with my code. It renders correctly on Chrome (to the right), but on Firefox (to the left) it's a bit off. Any suggestions on how I can fix this? It usually corrects itself after a refresh (zoom in/out), but al ...

htmlcssgoogle-chromefirefox

What is the best way to make an image in a slider overlap a following div?

I've been struggling to make the images on the right side of the slider overlay the div underneath it. I've experimented with different position and z-index values, but nothing seems to work. Check out the live site here This is what I currentl ...

htmlcsssliderz-indexpositioning

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

htmlcsswebsass