Overlap of images on a responsive CSS page

I'm venturing into the world of responsive design for the first time, but I seem to be facing some challenges. In the initial screenshot, you can see that the tower image is overlapping a div and I can't figure out where I went wrong. Check out the image here:

The container width is set at 1170px, and my intention was to initiate scaling of images and text when the screen size dropped below this point. Here's an image showing the scenario: . However, as the screen size dips below 760, the sections start overlapping. My goal is to resolve the overlap issue so that the images are displayed first on small screens, with the title and text following suit.

Could someone please guide me on how to achieve this or point out what mistakes I've made in my HTML and CSS code?

<style>
.lenovo-container {
    width: 1170px;
    height: 381px;
    min-width: 858px;
}

.lenovo-container img {
    float: left;
}

@media (max-width:1170px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .lenovo-container {
        max-width: 100%
     
        @media (max-width: 858) {
            .lenovo-container p {
                display: block;
            }
        }
</style>

<div class="lenovo-container">
    <img class=" wp-image-1498 size-full alignnone" src="wp-content/uploads/2015/06/Rack-server-e1434645252235.jpg" alt="Rack server" width="500" height="381" />
    <h2>Rack Servers</h2>
    <p>Lenovo ThinkServers and System x Rack Servers are Ideal for small to medium-sized business and feature power-efficient designs, segmented workloads, and fit-for-purpose applications.</p>
    <div class="product-button" style="vertical-align: bottom;">
        <div class="button-inner-product"><a href="http://shop.lenovo.com/us/en/systems/servers/racks/" target="_blank">Learn more</a>
        </div>
    </div>

</div>
<br>
<div class="aligncenter" style="width: 1170px; display: block; vertical-align: bottom">
    <hr />
</div>

<div class="lenovo-container">
    <img class="alignnone size-full wp-image-1565" src="wp-content/uploads/2015/06/Lenovo-server-e1434648963684.jpg" alt="Lenovo server" width="500" height="520" />
    <h2>Tower Servers</h2>
    <p>Lenovo tower servers provide the performance, reliability, and easy-to-use tools to manage your file/print and point-of-sale workloads.</p>
</div>

Answer №1

The issue lies with using float:left. Here is an alternative solution:

.lenovo-container {
    width: 1170px;
    height: 381px; /* If your image is being cropped, it may be too large.  
                      Try using auto or removing this property. */
    min-width: 858px;
    overflow: hidden;
}

.lenovo-container img {
    float: left;
}

Using floats can disrupt the flow of elements and position them to the left of all other elements. This adjustment ensures that the container respects the boundaries set by the float.

A cleaner fix would be:

.lenovo-container:after {
  display: table;
  content: '';
  clear: both;
}

If you want the image to resize based on the container's size, consider the following:

 @media (max-width:1170px) {
    .lenovo-container img {
      max-height: 100%;
    }
    .lenovo-container {
        max-width: 100%
    }
 }

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

Steps to make a sub Post or page on WordPress

Seeking to add sub posts within my website's main posts. The URL structure for the main post will be: site.com/post-title I envision sub posts following this format: site.com/post-title/subpost1 site.com/post-title/subpost2 site.com/post-title/ ...

Email text will be truncated with an ellipsis on two lines

Are there alternative methods to truncate text without relying on webkit-line-clamp? I need to implement this in an email, so using it is not an option. This is the current code snippet I am working with: <style> h2 { line-height:1.5rem; m ...

Layers of CSS images

Is there a way to create multiple layers for images on a webpage so they can move independently without affecting other elements? I attempted to use z-index, which did work, but it caused the page to increase in height. Additionally, when using jQuery.posi ...

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

Following the jquery hover function, the css hover feature ceases to work. In my html, there are multiple svg elements. A jquery script is applied where hovering over a button at the bottom triggers all svg elements to change color to yellow (#b8aa85). S ...

Customize Joomla Module Styles

Here in the JhotelResrvation Module area, I've identified where the module files are located. However, I'm unable to make changes to the CSS despite trying custom CSS as well. My initial plan was to add padding to the dark-transparent box using c ...

Optimized printing layout with Bootstrap

Having some trouble printing an invoice I created using HTML and Bootstrap CSS. The issue is that the content doesn't print in full width, even after changing the media from screen to all. Check out how it looks on the web: Here's how it appear ...

Using Bootstrap 4 causes text to wrap buttons onto a separate line

I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-float ...

Denied rendering of design due to incompatible MIME type

Just delved into the world of node / express and decided to test my skills by creating a simple tip calculator app. However, I seem to have hit a roadblock with loading my CSS. The console keeps throwing this error: "Refused to apply style from &apos ...

Can a CSS Grid layout be achieved without prior knowledge of image sizes?

I am working on a project where I am pulling images from Reddit and aiming to showcase them in a gallery-style grid. I have tried using a flex display and resizing the images to match dimensions, but unfortunately not all images have the same dimensions ...

Scraping an unbalanced HTML document using Beautiful Soup 4

While working with html files, I often come across partial files that have unbalanced html tags. For instance, there might be a missing <title> tag in the first line of this partial html file. Despite this issue, I wonder if Beautiful Soup can still ...

Enhance your Vue.js app with seamless page transitions using the

I am facing an issue and need some help. My goal is to create a web application-like interface. However, when I use vue.js transitions, it displays like this: https://i.sstatic.net/U1g6M.gif The transition automatically resizes, repeats, and changes si ...

CSS fluid layout with three columns

I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue? Example HTML: <div id= ...

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

Is it advisable to utilize CSS3 media queries to serve varied image sizes for retina display devices?

Although many questions similar to mine have been asked before, I believe my situation is slightly different. I have recently created a mobile app using JQM + Cordova/PhoneGap. In the beginning, I utilized large images aimed at retina display devices and ...

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

How to download and install Google Chrome Canary on your Android or iPhone device

I've been diving into a HTML 5 Web Audio Input project lately. I'm keen to test it out on my Android/iPhone devices, but after some research, I discovered that it only functions properly in Google Chrome Canary. The problem is, I can't seem ...

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size: HTML: <div class="grid-container"> <div class="grid-item"> <img src="small-thumb-dpi.jpg" /> < ...

Increase the identifier of my input text when a table row is duplicated through Javascript

I have a table with only one row that contains various elements like textboxes and buttons. I want to clone the table row using the append() function when a button is clicked. However, I am facing an issue - how can I increment the id of the textboxes and ...

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...