Issue with Responsive Styling

Hey everyone,

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>

CSS:

#text-area {
  max-width: 40%;
  background-color: rgba(0, 0, 0, .2);
  font-family:Arial;
  font-size:18px;
  padding-top:10px;
  padding-left: 10px;
  color:white;
  -webkit-border-radius: 0px 0px 5px 5px;
          border-radius: 0px 0px 5px 5px;
  padding-right:30px;
  height: auto;
  float:right;
  position:relative;
}

#slideshow {
    position: relative;
    max-width: 60%;
    height: auto;
}

#home-content {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
  height: auto;
  background-color: rgba(0, 0, 0, .2);
  padding-top:10px;
}

.ad-space {
text-align:center;
width:100%;
left:-333px;
}

Full width appearance: https://ibb.co/fAxTJ5

Mobile sized appearance: https://ibb.co/fFftkk

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…

Breakpoint CSS:

@media all and (max-width: 1024px) {
  h3 {
    font-size:30px;
    color: blue;
  }

  #slideshow .content {
    display: none;
  }

  .ad-space {
    display: block;
  }
}

@media all and (max-width: 768px) {
  form#cse-search-box {
    display: none;
}
  section#social.box {
      display: none;
    }

}

@media screen and (min-width: 720px) {
  responsive-nav {
    position: static;
    width:  auto;
    height: auto;
    background: none;
    color: $responsive-nav-background;
}
}

@media all and (max-width: 480px) {
  #img-about {
    max-width: 80%;
    height: auto;
  }



#slideshow {
  max-width:100%;
  height:auto;
  float:none;
}

#text-area {
  max-width:100%;
  float:none;
}
}

@media all and (max-width: 320px) {
  section.htmltabs {
    display: none;
  }
  section.tabs {
    display: none;
  }

}

For wider viewport, float the image, and optionally, float the text container. Give the image a right margin.

<img>
<p></p>

For narrower viewport, don’t float. float: none is not necessary.

1 Like

Thanks mtf!

That fixed full width but created a weird overlap on any smaller resolutions, even when I removed the float:none from the breakpoints.

When using float, be sure the parent element is position: relative and give the element a width property (not auto).

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…

This would be the element to float. Be sure to give it a width property, not just max-width.

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…

#slideshow img {
	position:relative;
	top: 0;
	left: 0;
	z-index: 10;
	margin:-1em;
  max-width:100%;
  height:auto;
  margin-right: 150px;
  float:left;
  width:650px;

#slideshow {
    position: relative;
    max-width: 60%;
    margin-right:200px;
    width: 650px;
}

#home-content {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
  height: auto;
  background-color: rgba(0, 0, 0, .2);
  padding-top:10px;
}
}

#text-area {
  max-width: 40%;
  background-color: rgba(0, 0, 0, .2);
  font-family:Arial;
  font-size:18px;
  padding-top:10px;
  padding-left: 10px;
  color:white;
  -webkit-border-radius: 0px 0px 5px 5px;
          border-radius: 0px 0px 5px 5px;
  padding-right:30px;
  height: auto;
  float:right;
  position:relative;
}

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:

<div class="parent">

</div>
.parent {
    position: relative;
    width: 100%;
}
    <div class="slideshow">

    </div>
.slideshow {
    float: left;
    width: 650px;
    max-width: 60%
    margin-right: 200px;
}
        <img>
.slideshow img {
    width: 100%;
}

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…

#slideshow {
    max-width: 60%;
    margin-right:400px;
    width: 650px;
    float:left;
}

#text-area {
  max-width: 40%;
  background-color: rgba(0, 0, 0, .2);
  font-family:Arial;
  font-size:18px;
  padding-top:10px;
  padding-left: 10px;
  color:white;
  -webkit-border-radius: 0px 0px 5px 5px;
          border-radius: 0px 0px 5px 5px;
  padding-right:30px;
  height: auto;
}

#home-content {
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
  height: auto;
  background-color: rgba(0, 0, 0, .2);
  padding-top:10px;
}

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.

<div class="parent">
    <div class="slideshow">

    </div>
    <div class="content">

    </div>
</div>
.content {
    float: left;
    width: 40%;
}

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.

1 Like

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!

1 Like