Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times

    Padding area problem help

    I'm viewing this on my Firefox. The left grid isn't the same with the other two grids.

    It works on chrome though. I guess.

    Shoe Game


    Google chrome:



    How can I align them together? Is it with the padding: 1.2em?

  2.  

  3. #2
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    This has nothing to do with the padding, it's because the heading in the 2nd and 3rd box are being split onto 2 lines, the easiest way to fix this is to add a media rule to your css and set a fixed height for each box.

    HTML Code:
    @media screen and (max-width: 768px) {
    
       .topgrid {
           height:141px;
       }
    
    }

  4. #3
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by timbo89 View Post
    This has nothing to do with the padding, it's because the heading in the 2nd and 3rd box are being split onto 2 lines, the easiest way to fix this is to add a media rule to your css and set a fixed height for each box.

    HTML Code:
    @media screen and (max-width: 768px) {
    
       .topgrid {
           height:141px;
       }
    
    }

    1.jpg

    Is this alright?

    I just added some min-height.

    Shoe game

  5. #4
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    That'll do it too, i didn't think of that :P

  6. #5
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Im done with the front page.

    Any advise?

    Shoe Game

  7. #6
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Setting a height (or min-height) will work fine, until it starts wrapping to 3, 4 or 5 lines. I suggest you use javascript or jquery to assign at height of the tallest one to all of its siblings. I would use the second one, as it is a little lighter, and easier of the browser.

    Code:
    var elementHeight = -1;
    $('.targetEelement').each(function() {
        elementHeight = elementHeight > $(this).height() ? elementHeight : $(this).height();
    });
    $('.targetEelement').each(function() {
        $(this).height(elementHeight);
    });
    or
    Code:
    var elementHeight = -1;
    $('.targetEelement').each(function() {
        elementHeight = elementHeight > $(this).height() ? elementHeight : $(this).height();
    });
    $('.targetEelement').height(elementHeight);
    Last edited by brandMatt; Oct 06th, 2015 at 01:47 PM.

  8. #7
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by brandMatt View Post
    Setting a height (or min-height) will work fine, until it starts wrapping to 3, 4 or 5 lines. I suggest you use javascript or jquery to assign at height of the tallest one to all of its siblings. I would use the second one, as it is a little lighter, and easier of the browser.

    Code:
    var elementHeight = -1;
    $('.targetEelement').each(function() {
        elementHeight = elementHeight > $(this).height() ? elementHeight : $(this).height();
    });
    $('.targetEelement').each(function() {
        $(this).height(elementHeight);
    });
    or
    Code:
    var elementHeight = -1;
    $('.targetEelement').each(function() {
        elementHeight = elementHeight > $(this).height() ? elementHeight : $(this).height();
    });
    $('.targetEelement').height(elementHeight);
    Jquery javascripts hurts for me now. I'm focusing on css.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com