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>