CODEWITHSUNDEEP
htmlcss
Freddy
Freddy

Reputation: 867

Div overlaps text in mobile preview

I have a div block which contains an image and text:

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
</div>
</div>

I've applied margin-bottom: 90px; on the parent div to create a gap between the div and any p tags which may be below it.

It works fine on full display, but on mobile, it looks like this:

As you can see, it's overlapping the following p tags after the div. How can I fix this? Ideally I want a 20px gap between the parent div and anything outside the div.

Edit:

I feel like my approach is wrong. I.e. if I remove margin-bottom: 90px; from the code above, the div will still overlap any following p tags:

Upvotes: 0

Views: 83

Answers (4)

Navghan
Navghan

Reputation: 1

The problem is that is position absolute on title. i recommended following structure for free hesitate for all resolutions and devices. 

.block-quote {
    display:block;
    margin:0;
    padding:20px 0 0 70px;
    background:url(https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png) 0 0 no-repeat;
}

h2 {
    font-family: 'AvenirLight'; 
    color: #74818a; 
    font-size: 36px; 
    line-height: 45px; 
    font-style: italic;
}
<div class="block-quote">
    <h2>“Enabling understanding means being able to communicate effectively”</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin vulputate vehicula. Morbi fermentum elit lobortis nibh molestie, nec facilisis elit tempor. Nullam porta lectus erat, et hendrerit diam dictum at. Vestibulum sed enim turpis. Sed vehicula venenatis cursus. Mauris sit amet venenatis velit. Nullam ut purus erat. Nam posuere lorem at est ultrices luctus.</p>
</div>

Upvotes: 0

Stefan R
Stefan R

Reputation: 404

The reason why other elements are overlapping your quote element, is because the element which is primarily deciding the height of the element (the div which contains the paragraph) is having an absolute position. An absolute positioned element is no longer part of the parent (unless the parent has a relative position). So, in this case, because the div with the paragraph is no longer 'part' of the parent, the parent will only have a height based on the static/relative positioned elements. Which is the image.

As a solution you can switch the absolute position of your p element to the img element. You know the width and the height of the image, so you can set a padding for your paragraph element. In this case the height of the parent div (which is called .quote-wrapper in my example) will have the correct height so elements above or below .quote-wrapper won't overlap your element.

.quote-wrapper {
  padding: 40px 0;
}

.quote-wrapper .quote-image {
  width: 120px;
  height: 100px;
  position: absolute;
}

/* Set position to relative so the element won't be overlapped by the image */
.quote-wrapper > p { 
  font-family: AvenirLight; 
  color: #74818a; 
  font-size: 36px; 
  line-height: 45px; 
  font-style: italic;
  padding: 80px 0 0 80px;
  margin: 0;
  position: relative;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="quote-wrapper">
  <img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" class="quote-image" />
  
  <p>
    “Enabling understanding means being able to communicate effectively”
  </p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

Try editing your html code this way and add this media query to your code.

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
  <div style="position: absolute; top: 50px; left: 78px;" class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
  </div>
</div>

@media screen and (max-width: 767px) {
  .quatation {
    position: static !important;
  }
}

Upvotes: 0

Lara
Lara

Reputation: 51

You can put margin-top inside the tag p. I recommend that you put an id or class for each tag (div,p...), to make the structure easier and that labels do not overlap.

Upvotes: 0

Related Questions