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 9 of 9
  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Newbie with icons on one line issue

    Morning,

    On my index page i have 4 icons of which i am trying to layout on one line.
    I also would like to center the google maps icon.

    The original size was 64x64 but the green telephone icon would drop off onto the next line.
    I have now changed there size to 50x50 to have them on one line but my problem is why do i need to do this when the two images below are wider & sit on one line as shown in photo supplied ?

    I am asking for some advice please to the following,
    Four icons centered and on one line.
    Google maps icon to also be centered.

    3457.jpg

    Many thanks for your time

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Without looking at the code, it's hard to tell. I think you would greatly benefit from learning how to use Chrome's dev tools. It can show you what is effecting the height and width of your elements among a huge host of other things. Here's an introductory video on how to use them:
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Ive been using the F12 in chrome to pin point the element etc but i dont see which line of code in the css that makes the space between each icon change.
    The same applies to the centering of the icons.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You can remove CSS rules by unchecking the checkbox to the left of them. You'll see in real time the effect it has. Most likely, you have a padding or margin set on it like in your last post that is restricting the width.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Thanks for the reply but un-checking all of them in the class icons made no difference.
    I will have to think.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    After digging up one of your other posts so I can look at the code, I found the problem. You're setting the height and width on the img element.

    Instead, set it in CSS using a percentage value for only the width and 64px for max-width. This will cause the image to maintain its size ratio while shrinking and growing to fit.

    You may have to play with the % number a bit due to size rounding errors or padding, etc.,
    Code:
    .icons img{
      width: 23%; /* Less than 25% to compensate for padding, margin, etc., */
      max-width: 64px;
    }
    Drop that in your CSS somewhere after any other code related to those images.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Wow.
    I changed them from 64x64 to 50x50 to actually help the situation, but in fact didnít help at all.
    I should of seen this but learning as I go.

    Many thanks for your time.
    I will check it out once home.

  9. #8
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Ive now added the following code & looks ok to me,
    Code:
    		.icons img{
            width: 10%; 
            max-width: 64px;
            }
    		
            .googlemap {
    	          text-align:center;
            }
    Do you now see ive encountered this grey dot for some reason ??

    3459.jpg

  10. #9
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    In the main css file at line 595 i have changed the following
    list-style: disc;
    TO
    list-style: none;

    All is now ok


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 07:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com