-3

enter image description here

See the attachment. I have 6 logos at the top and 7 logos at the bottom that sticks out of the screen. How to create the bottom div to be non-responsive?

erin027
  • 69
  • 1
  • 8
  • 1
    You need some html and stylesheet. – Loïc Faure-Lacroix Dec 19 '17 at 23:01
  • 1
    Please give an example as well as possibly reforming the question. The bottom "not being responsive" is not very descriptive of what you want, it looks like its already not very responsive when the images are hanging off the page. – Zuriel Dec 19 '17 at 23:02
  • Thanks for all your tips. However, when the total of divs expands the container width, 1000px, it drops to the second row. Currently, I am using float:left for the each divs, but inline-block has the same result. How to solve this? http://bobitmarketingsolutions-com.webflow.io/homepage – erin027 Dec 19 '17 at 23:39

3 Answers3

0

Add a fixed width on it. In pixels.

width: 700px;

Billy Fischbach
  • 191
  • 1
  • 9
  • Thanks for all your tips. However, when the total of divs expands the container width, 1000px, it drops to the second row. Currently, I am using float:left for the each divs, but inline-block has the same result. How to solve this? bobitmarketingsolutions-com.webflow.io/homepage – erin027 Dec 19 '17 at 23:40
0

Update:

Remove these divs from the page to get the desired effect:

<div class="partner-divider"></div>

You'd need to set the display property to: inline-block

<div style="display: inline-block">Text</div>

If you change your mind and want it responsive:

HTML:

<div id="myDiv"> Content </div>

CSS:

#myDiv
{
    min-height: 100%;
    max-height: 100%;
}

References:

How to make div not larger than its contents?

Make div NOT auto stretch to container width

Div 100% height of page responsive

Petro
  • 3,484
  • 3
  • 32
  • 59
  • Thanks for all your tips. However, when the total of divs expands the container width, 1000px, it drops to the second row. Currently, I am using float:left for the each divs, but inline-block has the same result. How to solve this? bobitmarketingsolutions-com.webflow.io/homepage – erin027 Dec 19 '17 at 23:40
  • Can you be more specific about what you need displayed and how many divs you have? – Petro Dec 20 '17 at 00:16
  • Here is the page that I am having trouble with: http://bobitmarketingsolutions-com.webflow.io/homepage On the top row, there are 6 divs that have logo images and 5 divs that have the dividers. On the bottom row, there are 7 divs that have logos, and 6 divs that have the dividers. I wanted to display something like the initial attachment at the top of this post. Thanks – erin027 Dec 20 '17 at 05:40
  • check my answer now – Petro Dec 20 '17 at 06:40
0

Hope this will help you something like this.

<div class="col-md-6">
  <div style="width: 500px;">
    <div class="box" id="A"></div>
    <div class="box" id="B"></div>
    <div class="box" id="C"></div>
    <div class="box" id="D"></div>
    <div class="box" id="E"></div>
    <div class="box" id="F"></div>
    <div class="box" id="G"></div>
    <div class="box" id="H"></div>
    <div class="box" id="I"></div>
  </div>
</div>
Tammy
  • 1,122
  • 5
  • 19
  • 50
  • If the total width of the class box exceeds 500px, it drops to the 2nd row. Is there a way to prevent it? – erin027 Dec 21 '17 at 15:56
  • @erin027 you can use style definition: word-wrap: break-word ; – Tammy Dec 21 '17 at 19:38
  • I am using images. Please see the 'Brand that trust us section.' http://bobitmarketingsolutions-com.webflow.io/homepage – erin027 Dec 21 '17 at 22:41