Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 6, 2019 at 11:53 am #1050547
    Dee

    Hi Guys

    I need a little help if possible please.

    I have used a code block to create some horizontal buttons. The layout is perfect on the large iMac I design on. But as I look at smaller computer screens or tablets/mobiles – the buttons dont seem to auto adjust?

    Code for buttons: <ul class=”c-buttons”>

  • INFORMATION TECHNOLOGY
  • HEALTHCARE

    • CSS: .c-buttons {
    text-align:center;
    }
    .c-buttons li {
    background: rgba(255,255,255,0.2);
    list-style-type:none;
    display:block;
    float:left;
    border:1px solid #423e42;
    }
    .c-buttons li:hover {
    background: rgba(255,255,255,0.2);
    color:#ffffff;
    }
    .c-buttons li a {
    padding:60px;
    color:#423e42;
    }

    Website attached in private content. There are a number of buttons on that page which fall out of line as the screen size reduces.

    Thanks!
    Dee

January 7, 2019 at 6:04 am #1050748
Rikard

Hey Dee,

How do you want them to act on mobile screens?

Best regards,
Rikard

January 7, 2019 at 10:13 am #1050813
Dee

Hi Rikard

I would like to them possibly still stay next to each other on computer / laptop size screens and then they can go one underneath each other on small screens. Whatever layout would look right? Can you see how they look now on a smaller screen?

Regards
Dee

January 8, 2019 at 5:08 am #1051175
Rikard

Hi Dee,

You could try to add specific CSS for tablets/phone sized screens:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  tablet CSS goes here
}

@media only screen and (max-width: 767px) {
  phone CSS goes here
}

Best regards,
Rikard

January 8, 2019 at 11:48 am #1051345
Dee

Hi Rikard

I have tried this css and nothing has changed:

@media only screen and (max-width: 767px) {
.c-buttons li {
background: rgba(255,255,255,0.2);
list-style-type:none;
display:block;
float:center;
border:1px solid #423e42;
}
.c-buttons li:hover {
background: rgba(255,255,255,0.2);
color:#ffffff;
}
.c-buttons li a {
padding:0px;
color:#423e42;
}

Also – its not just on mobile and tablet but as you go down from my large iMac screen to even a slightly smaller screen it throws out the buttons and they do not reduce down like the rest of the site?

Thanks
Dee

January 10, 2019 at 7:02 am #1052199
Ismael

Hi,

Thanks for the update. You can try this css code:

@media only screen and (max-width: 767px) {
.c-buttons li {
    float: left;
    width: 48%;
    clear: none;
    margin: 0 0 0 1%;
    font-size: 13px;
}

.c-buttons li a {
    padding: 0;
}
}

Best regards,
Ismael

  • Author
    Posts
    • Viewing 6 posts - 1 through 6 (of 6 total)
    • You must be logged in to reply to this topic.