3

ANYONE WHO ANSWERS IS A HERO! Im having a CSS issue and yes I’m a CSS noob! I have a flex box with two columns of data and I want the divs to stack when the screen gets narrow enough. The issue is that I want them to stack ordered by a data attribute. I wrote a media query like this

@media (max-width: 767 px) {
.row { flex-direction: column};
.row div { order: attr(data-ordinal) };
}

I want each of the divs to be ordered by the data-ordinal attribute (a number) when the screen gets at most 767 pixels or on a mobile device. I was banging my head for a while on this assshole. Can anyone find the issue here? I may have left out a few details but does this CSS at least LOOK ok? I’m new to media queries. PS sorry, whats the bot that does the highlighting? I forgot it, but luckily this is simple enough to read

Comments
  • 3
    Well I'm not a frontend guy(well, I'm a backend) , but I'm here for the answer anyway.
  • 2
    @johnmelodyme cool! I guess you have the same or similar issue? CSS can get a bit weird
  • 4
    Pretty sure you're going to have to use JS to modify the CSS and inject the correct order based on the data attribute, css is good but it ain't that good - until someone proves me wrong.

    example with some pseudo js 😅
    #untested

    this.box.style.order = this.box.attribute("data-sm-order")

    edit: I skrewed around with this and couldn't get it to work with css alone.

    Good luck.
  • 2
    If you can predefined in css the order with
    :root{
    --small-order-1: 1;
    --small-order-2:2;
    }

    And then add

    order: var(--small-order-1) //change as required

    You can control it that way.

    gist of my screw around.
    https://gist.github.com/C0D4-101/...
  • 2
    I don't think CSS can sort data, you have JS for that.
  • 2
    @theabbie it can, just not to the extent I think @TeachMeCode is trying to achieve ☚ī¸
  • 0
    @C0D4 If we are giving attributes with correct order, it's not sorting actually, atleast not differently on small screen.
  • 2
    @C0D4 @theabbie thanks! Im dead tired but I’ll take a look at this in more detail, need sleep first. But yeah I tried to avoid hardcoding the children in the queries aka child1 order:1 child 2 order: 2 etc but CSS might not have that ability. Would be nice if it did though lol
  • 1
    @theabbie attributes I forgot to remove, I'm working 😅

    If you modify the :root values you can control the order.

    You could control those in JS with the the attribute tags though, not much of a stretch from there.

    So if you had

    --small-1
    --medium-1
    --large-1

    And use @media to control when they are used, and JS to determine the values based on attribute tags you could pull it all together 😇
  • 1
    @TeachMeCode no I don't do CSS ..... Just curious.
  • 0
    @theAbbie, @TeachMeCode

    Ok, since I hate you guys now, I went and made it work.

    If you shrink screen to 600px the order will change based on the attribute tags.

    Don't judge my shitty code, I've just slapped it together for argument sake.

    https://gist.github.com/C0D4-101/...
  • 2
    @C0D4 Now explain why can't we just sort it using JS if we have to use it anyways?
  • 1
    @theabbie well... 🤷‍♂ī¸
    Some people hate writing js to do most of the work css can do anyway.

    In this case, css can get us there , but needs a nudge in the right direction so we can handle the customisable sorting based on the elements them selves.
  • 3
    Looks like attr() is still only supported on content css property - https://caniuse.com/css3-attr

    So you will need to use JS for this unfortunately.
  • 3
    @TeachMeCode FYI, the bot is @highlight

    @theabbie You'll be surprised at what CSS3 can do that most people would use JS for (I'm not one of those CSS wizards but have been following a few who are insane).

    @arekxv Yeah, especially with 0% support as of now.
  • 0
  • 0
    Thanks guys, it sucks CSS won’t let us have nice things so it’s either use JS or reference the divs manually in the media query
  • 1
    @TeachMeCode You could also try using SCSS; it should certainly help in not doing it manually.
  • 1
    @Berkmann18 thanks. My CSS sucks, it’s my weakest thing, but I’ll look into SCSS.
  • 1
    @TeachMeCode No problem 😁.
  • 0
    @Berkmann18 Wait is there an API fro creating Devrant bot?
  • -1
  • 0
    Don’t worry, got the issue cleared a while ago but do you need to know CSS really well to do front end development? It’s not super alien to me, but I see all these random pixel values like height 20px border 30px, and I have no idea how people come up with these. I would shit my brains out trying to write a big CSS file
  • 1
    @johnmelodyme Yeah, I don't know much about it tho as I never developed a devRant bot.
  • 1
  • 0
Add Comment