i need a little help with css

anyone know how i can make this for smart phones

1 Reply

container style would something like

.menu{
    display: flex;
    /* or display: grid; grid-auto-fow: column; */
}

.item{
    border-radius: 5px;
    background: lightblue;
}

.item.selected{
    background: cyan;
}

.menu{
    display: flex;
    /* or display: grid; grid-auto-fow: column; */
}

.item{
    border-radius: 5px;
    background: lightblue;
}

.item.selected{
    background: cyan;
}

where .menu is the container and .item is the category for smartphone you would use a media query ei

@media (max-width: 600px) {/* styles */}

@media (max-width: 600px) {/* styles */}

assuming that you want only one item selected. Every .item in that scenario would have something like onclick="select(this)"

function select(e){
    const items = document.querySelectorAll(".item");
    for(let i=0; i<items.length; i++){
        if(items[i]==e) e.classList.toggle("selected");
        else items[i].classList.remove("selected");
    }
}

function select(e){
    const items = document.querySelectorAll(".item");
    for(let i=0; i<items.length; i++){
        if(items[i]==e) e.classList.toggle("selected");
        else items[i].classList.remove("selected");
    }
}

this allows to have zero selected if you want atleast one selected change the "toggle" to "add"

Gaming

Programming

i need a little help with css