locked
What to do to make a <hr /> responsive RRS feed

  • Question

  • User426001450 posted

    Hello to all

    I have something like:

    <div class="row"> 
       <div class="col-lg-10" >
          <hr /> 
       </div>
    </div>

    How could I make this <hr /> responsive. I'm using bootstrap.

    Thanks to all 
     

    Friday, February 28, 2020 6:25 AM

All replies

  • User281315223 posted

    An <hr> element by default should be somewhat responsive as it will scale horizontally to the size of its parent. So in your case, you already have a responsive column (col-lg-10), so the nested <hr> element should always extend across it unless you have some custom CSS explicitly stopping it from doing so.

    Friday, February 28, 2020 6:31 AM
  • User288213138 posted

    Hi vstorpedo,

    How could I make this <hr /> responsive. I'm using bootstrap

    Do you want to achieve <hr> responsive through Bootstrap, or just want to <hr> responsive directly?

    If you want to <hr> responsive directly, you can achieve this by css.

    Here a demo for you as a reference.

    https://codepen.io/tomhodgins/pen/grXPAa

    Best regards,

    Sam

    Friday, February 28, 2020 8:19 AM
  • User-857013053 posted

    you can try this code to make hr responsive /* Min-width */
    .row hr {
    display: block;
    }
    @media (min-width: 500px) {
    .row hr {
    display: none;
    }
    }

    Monday, March 2, 2020 6:47 AM
  • User426001450 posted

    Hello and thanks for your help

    An <hr> element by default should be somewhat responsive as it will scale horizontally to the size of its parent. So in your case, you already have a responsive column (col-lg-10), so the nested <hr> element should always extend across it unless you have some custom CSS explicitly stopping it from doing so.

    I understand what you’re saying, since that is the case, I would like to explain the problem in a different way. My design is for large screens as you could see in my code:

    <div class="col-lg-10" >

     At this time the page only displays items for columns 1 to 4 and 4 to 8. The page response when viewed in small screens and everything displayed in columns 4 to 8 stack under whatever is displayed in columns 1 to 4; this is fine but the problem is that the <hr /> don’t do that, and I understand why no after your explanation. User could sweep left and see all the other empty columns and the only thing there is the <hr />.

    Questions:  

    Could I do something to lock the page on small screens and avoid users sweeping left? Could this be fixed with the CSS? Is this problem due to the page body code in the CSS? This is my CSS body code:

    body
    
            { width:11in; margin:0 auto;/* This part center webpage automatically on the screen */
    
              background-color:#B6B6B6;         
    
            }

    You could take a look at the page on your phone small screen at this address: http://bglocal.com

     Thanks to all          

    Tuesday, March 3, 2020 2:59 PM
  • User288213138 posted

    Hi vstorpedo,

    Could I do something to lock the page on small screens and avoid users sweeping left? Could this be fixed with the CSS? Is this problem due to the page body code in the CSS?

    According to your description, I couldn’t understand your requirement clearly.

    Why do you want to lock the page on small screens and avoid users sweeping left?

    Shouldn't responsiveness meet the conditions under any conditions?

    Best regards,

    Sam

    Wednesday, March 4, 2020 7:51 AM
  • User426001450 posted

    Hello 

    Why do you want to lock the page on small screens and avoid users sweeping left?

    Well, for the very same reason that I explained before. My last post read like this " ... User could sweep left and see all the other empty columns and the only thing there is the <hr />. ......; So, if according to this there is nothing to see when sweeping left because all columns are empty, what is the purpose anyway. The other thing that may be done is to include some code that tell the device to show only the columns that have something to display but I don't know if this could be done with CSS, Bootstrap or whatever.

    Thanks for helping 

    Wednesday, March 4, 2020 1:51 PM
  • User288213138 posted

    Hi vstorpedo,

    So, if according to this there is nothing to see when sweeping left because all columns are empty, what is the purpose anyway. The other thing that may be done is to include some code that tell the device to show only the columns that have something to display but I don't know if this could be done with CSS, Bootstrap or whatever.

    Sorry, I still can't understand your problem, can you take a gif image to illustrate your problem?

    Best regards,

    Sam

    Wednesday, March 11, 2020 6:52 AM