How to remove extra white space above text

Discussion in 'HTML & Website Design' started by Soupi, Aug 4, 2020.

  1. #1
    Hello I am trying to get this text "*SCRC Reading Room is closed for the Fall 2020 Semester" closer to "Bird Library: View Service desk hours" How would I do that given this code.

    
    <h3 class="hours-h3">Bird Library</h3>
    <script src="//api3.libcal.com/js/hours_grid.js?002"></script>
    <div id="s-lc-whw1503"></div>
    <script>
    $(function(){
    var week1503 = new $.LibCalWeeklyGrid( $("#s-lc-whw1503"), { iid: 3186, lid: 1503,  weeks: 8 });
    }); </script>
    *SCRC Reading Room is closed for the Fall 2020 Semester
    
    Code (markup):
    image can be found on https://ibb.co/W5NDRk4
     
    Soupi, Aug 4, 2020 IP
  2. olmix

    olmix Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #2
    Hello,
    We dont have your CSS code but i think your <div id="s-lc-whw1503"></div> must have margin-bottom or padding-bottom.
    You need to remove it.
    If you have access to the CSS try :

    #s-lc-whw1503 {
    padding-bottom:0;
    margin-bottom:0;
    }
    Code (markup):
     
    olmix, Aug 4, 2020 IP
  3. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    I added this but no luck
    
    <h3 class="hours-h3">Bird Library</h3>
    <script src="//api3.libcal.com/js/hours_grid.js?002"></script> 
    <div id="s-lc-whw1503"></div> 
    <script>
    $(function(){ 
    var week1503 = new $.LibCalWeeklyGrid( $("#s-lc-whw1503"), { iid: 3186, lid: 1503,  weeks: 8 }); 
    }); </script>
    <div style="padding-bottom:0; margin-bottom:0;">*SCRC Reading Room is closed for the Fall 2020 Semester</div>
    
    Code (markup):
    you can find it on https://library.syr.edu/hours/index.php, if you scroll down to BIRD LIBRARY
     
    Soupi, Aug 4, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,758
    Likes Received:
    4,519
    Best Answers:
    123
    Trophy Points:
    665
    #4
    You'll get a big improvement just by removing the <br>

    upload_2020-8-5_10-12-36.png
     
    sarahk, Aug 4, 2020 IP
  5. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Thank you for that.
    But the space I want to get rid of is that i scribbled in red.
     

    Attached Files:

    Soupi, Aug 4, 2020 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,758
    Likes Received:
    4,519
    Best Answers:
    123
    Trophy Points:
    665
    #6
    gotcha, here's your culprit

    upload_2020-8-5_11-56-55.png

    that's some really nasty page layout you've got going on there. Tables are for showing data not providing layout.

    upload_2020-8-5_11-57-58.png
     
    sarahk, Aug 4, 2020 IP
  7. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    Thank you i appreciate it, i dont think i have access to the css, is there any inline css u can provide that will fix it?
    like this
    <div style="padding-bottom:0; margin-bottom:0;">*SCRC Reading Room is closed for the Fall 2020 Semester</div>
     
    Soupi, Aug 4, 2020 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,758
    Likes Received:
    4,519
    Best Answers:
    123
    Trophy Points:
    665
    #8
    You want to add the css to the table above it, inline css will overrule the css file.

    Something like this will do the trick

    upload_2020-8-5_15-57-14.png

    To get those screen shots I'm using the developer tools in my browser - in this instance chrome, right-clicking, and choosing inspect.

    It lets me click or hover over parts of the screen.

    In this case when I can see that the table has a beige bar at the bottom that represents the margin for that element. Doing the same for the *SCRC text doesn't show a beige bar telling me that there isn't a margin set for that element.

    Once I know where the white space is coming from I can start to mess about making changes to it, and once I know what needs to be changed and where I can take those changes to my script and set it live.

    upload_2020-8-5_16-4-12.png






    upload_2020-8-5_16-5-59.png
     
    Last edited: Aug 4, 2020
    sarahk, Aug 4, 2020 IP
  9. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    Thank you that worked, and to remove the spacing here which is located in the beginning, would i do the same?
     

    Attached Files:

    Soupi, Aug 5, 2020 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    28,758
    Likes Received:
    4,519
    Best Answers:
    123
    Trophy Points:
    665
    #10
    Have you played around with the inspect tools?
     
    sarahk, Aug 5, 2020 IP
  11. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #11
    Yes I tried but wasnt able to remove the extra space after the first instance of the *SCRC text
     
    Soupi, Aug 5, 2020 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    28,758
    Likes Received:
    4,519
    Best Answers:
    123
    Trophy Points:
    665
    #12
    You've got 2 things contributing to the spacing

    .page-row-block (local.css, line 2478) has padding-bottom: 30px
    hr has a margin top and bottom of 20px

    upload_2020-8-6_14-53-55.png
    upload_2020-8-6_14-53-19.png

    Once you've got all this nutted out take a look at it on mobile - the table headers need some TLC

    upload_2020-8-6_14-56-17.png
     

    Attached Files:

    sarahk, Aug 5, 2020 IP
  13. Infatica

    Infatica Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    1
    #13
    second <div class="page-row-block"> in "<article class="level-two col-lg-8 col-md-8 col-sm-8 col-xs-12">"
    replace to <div class="page-row-block" style="padding-bottom:0;">
    HTML:
    but it's better to never use inline styles...
     
    Infatica, Aug 6, 2020 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #14
    It's even better not to piss all over the markup with incorrect to nonexistent semantics and presentational classes that undo 23 years of progress... but when the mind-numbingly dumbass idiotic trash that is bootcrap gets involved, good practices go right out the window.
     
    deathshadow, Aug 7, 2020 IP