I’m having a tough time getting my home page content to align properly. I am trying to have an image on the left and text on the right. I also won’t both these elements to be responsive and at a certain resolution appear one below the other. I feel like I am missing something very basic. Is there anything glaringly obvious with my code you could clue me in on?
HTML:
<section id="home-content">
<section id="slideshow">
<ul>
<li>
<section class="content">
<h2>Learn How They Changed the Underground Metal Scene</h2>
<p><a href="about.html" class="btn-more">Read More</a></p>
</section>
<img src="./img/slider/slider-box-1.jpg" />
</li>
</ul>
</section>
<br>
<section id="text-area">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in est feugiat, scelerisque arcu quis, gravida quam.
Cras congue facilisis sapien, finibus posuere lacus fermentum eget.</p>
<p>Mauris et viverra magna. Fusce dapibus justo ante, tristique congue urna egestas sit amet. </p>
</section>
<section class="clear"></section>
<section class="ad-space">
<h3>Our Sponsors</h3>
<img src="img/schecter-banner.jpg" />
<img src="img/shure-banner.jpg" />
<img src="img/prs-banner.jpg" />
</section>
</section>
I am also using breakpoints at max width 1024, 768, 720 and 480 and 320 to work on responsive styling. After I figure out what is going wrong here I need to figure out how to create a hamburger menu for just max width 480 or lower…
I believe I have. In this case the parent element to slideshow img is slideshow, which is set to position relative and a max-width of 60%. Text areas max-width is set to 40%, which is the text I want next to the image.I’m so stumped here…
I gave both the slideshow and slideshow img properties a set width of 650px as well as a max width % and am still having the same overlap issue right around tablet resolution… I tried removing height:auto; as well and that didn’t help… Also gave both properties a right margin of 150px… Dang it…
The position attribute for the above will need to be on the parent of #slideshow, since we don’t give a position property to a floated (out of normal flow) element.
In theory the following should help to set up the layout:
So I did as suggested and that almost fixed the mobile issue. I would like the text area to be aligned so everything is centered in mobile view but floating right is the only way I can get the text area to go next to the image. Without floating the text area right this is what happens:
Also, now the caption has disappeared from the image… So I’ll have to look into what specifically caused that…
It occurs to me that floating only one object can sometimes set up a faux column scenario. I’m a bit rusty on all this. The cure is to float:left both elements.
Bear in mind that margins are going to impose themselves on any layout. It might be better to put a right margin on the img and no margin on the container. You might have to set img { display: block; } if the margin doesn’t take.
Also, please realize that I am just throwing stuff out there, not precisely studying your code.
Floating both elements left work! Also, as mentioned initially, any help is greatly appreciated. The fact you’re willing to even try helping at all means a lot, I certainly don’t expect you to be studying my code. I’m just providing it to make things as easy as possible for people who are willing to help. So thank you again very much for your time and help! I’ve spent several hours this week trying to figure these things out and was at my wits end. Cheers!