List with bullets not mobile responsive

  • ericaski

    (@ericaski)


    8 years, 11 months ago

    I created two columns of bullets with a width of 20%, but on a some smaller phones the column widths are collapsing to the point the bulleted items are on top of each other. How can I fix this?

    .two-columns {
    width: 20%;
    float: left;
    margin-right: 2%;

    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 11 months ago

    Something like

    @media screen and (max-width: 400px) {
   .two-columns {
    width: 100%;
    float: none;
    margin-right: 0;
   }
}

    will let you change this to a single column when it gets below 400px. This may or may not work, depending on where you put in in your CSS file. It should go after .two-columns is defined so it can override that definition at that width.

    Thread Starter ericaski

    (@ericaski)

    8 years, 11 months ago

    No, that didn’t work. Any other suggestions?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 11 months ago

    That’s the general solution. You’ll have to work through the proper media queries.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘List with bullets not mobile responsive’ is closed to new replies.