Results 1 to 9 of 9

Thread: Have css control size of buttons on webpage

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default Have css control size of buttons on webpage

    Hi,

    Here is the page in question.
    https://www.theremotedoctor.co.uk/gallery.html

    What i have noticed is when looking on a mobile device i see the buttons like example "SEAL" "FOX" "TRANSPORT" etc are sized by how many characters are within it.
    As such the look is not clever & was needing the buttons to be a certain size so at least horizontal / vertical layout would look uniform regardless of what text is inside.
    Pc is kind of the same so will need to look at it once the mobile is sorted.

    Once i have the code in place i can play with it & see how i want it using my phone

    I have supplied some screenshots of the look & also what i would like to see.

    I did add padding: 10px 22px; to css as a test but no change so i think something is controling it of which im yet to find.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4076.jpg 
Views:	26 
Size:	46.3 KB 
ID:	6522   Click image for larger version. 

Name:	4075.jpg 
Views:	24 
Size:	24.5 KB 
ID:	6523   Click image for larger version. 

Name:	4077.jpg 
Views:	26 
Size:	14.9 KB 
ID:	6524  
    Last edited by theremotedr; 07-18-2022 at 05:02 PM.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,347
    Thanks
    4
    Thanked 289 Times in 282 Posts

    Default

    Hi there theremotedr,

    try changing this...
    Code:
    #myBtnContainer{
        position:sticky;
        top:0;
        background: #010101;
    }
    ...to this...
    Code:
        position: sticky;
        top: 0;
        background: #010101;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    ...and then adding this...
    Code:
    #myBtnContainer button{
        width: 10em;
    }
    ...to your stylesheet.

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (07-18-2022)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Many thanks now applied.
    I was doing it totally the wrong way.

    I changed the em size to px so i can understand / work with it.

    Phone looks perfect but noticed one thing on pc.

    Can i ask what & where is the code that governs the text within the buttons that we see.
    I ask because AIRCRAFT SQUIRREL THATCHERS & TRANSPORT seem to be positioned to the right,so much so its nearly out / off the button.
    All the others look fine.
    I assume if the text is centered then why is it doing this.

    Thanks
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4080.jpg 
Views:	21 
Size:	48.1 KB 
ID:	6525  

  5. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Just an update.
    I see why its doing it.
    I F12 & click on THATCHERS where i then see dotted horizontal & vertical lines.
    It is the width of the verical lines that are doing this as the RS in THATCHERS are outside the right hand dotted line

    See attached image
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4081.jpg 
Views:	21 
Size:	75.8 KB 
ID:	6526  

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,347
    Thanks
    4
    Thanked 289 Times in 282 Posts

    Default

    Hi there theremotedr,

    you've changed the code that I provided...
    Code:
    #myBtnContainer button{
        width: 10em;
    }
    ...to this...
    Code:
    #myBtnContainer button{
        width: 105px;
    }
    ...so no wonder it looks awful.

    If you must insist on using px then add 55 to you present value.

    coothead
    ~ the original bald headed old fart ~

  7. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (07-18-2022)

  8. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    I changed it as 10em would give me only 2 button in each row on the phone.
    Then many rows down the page.
    As these 2 rows are centered there is plenty of space to the left & right so im trying to make use of it

  9. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    9.5em seems to have done it

  10. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,347
    Thanks
    4
    Thanked 289 Times in 282 Posts

    Default

    Hi there theremotedr,

    if you change the padding used here...
    Code:
    .btn {
      border: 2px solid #000000;
      outline: none;
      padding: 12px 16px;
      margin-bottom: 5px; /* added by coothead */
      background-color: white;
      cursor: pointer;
      font-family: 'Lucida Handwriting';
      border-radius: 20px;
      color: #000000;
    }
    ...to
    Code:
      padding: 0.75em 0;
    ...you could then change this...
    Code:
    #myBtnContainer button{
        width: 10em;
    }
    ...to this..
    Code:
    #myBtnContainer button{
        width: 7.5em;
    }
    This would put three buttons on a row instead of two on an iPhone 11 Pro (375x812).

    coothead
    ~ the original bald headed old fart ~

  11. #9
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Ive looked at what i had then applied the above but i prefer what i had.
    So i will use that as on my phone it looks better.

    I use 9.5em from the original 10em

    Thanks

Similar Threads

  1. Scroll bar buttons to control Iframe?
    By o0paradox0o in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 04-30-2008, 03:52 AM
  2. Can buttons be used to control aspects of <marquee>?
    By 2b2gbi in forum Looking for such a script or service
    Replies: 3
    Last Post: 12-13-2007, 05:11 AM
  3. Control window size of popups (all links)
    By adina in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-14-2006, 07:46 AM
  4. Need an image size control before upload
    By QSDangKhoa in forum JavaScript
    Replies: 5
    Last Post: 09-15-2006, 10:10 PM
  5. Control size of window
    By jjvoice in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 05-13-2006, 06:46 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •