Need help with styling specific tags/elements
So, i did achieve this design but now i was implementing it in a better way using grids and relative units to avoid breaking and too much wrapper divs.
The screenshot i shared is the design i created using flexbox and not best practices. But it is the actual design.
Here is the codepen of what i am trying to do now :
https://codepen.io/Zeshan-Merchant/pen/NWeQpZW
Inside this codepen's javascript, there is a dummyArray of objects, which i am supposed to iterate and display the values inside my cards.
The javascript code is of my old design just to give you guys the idea, how i was displaying the data.
Now, i used to append a lot of divs, like as you can see, there are bunch of key:value pairs inside the card/article. My question is, without using so much of spans and stuff, how can i style the key and values differently? In my old version, i used so many classes to style them but i got some advice from some people saying that its not a good practice. I was able to cut off the excess wrapper divs but now i am confused how should i style the key differently and value differently? What i am thinking is to add them in seperate spans but then it would be spans inside of spans.
What i am trying to achieve is the screenshot design but in a better way, also i am going to use the same array of objects.
Is it possible to style the key value differently without adding too many elements through javascript?
Also, the html inside my codepen is what the actual structure of the cards will look like after the displayData function runs. If i can use any other tags instead of spans, do let me know.
The screenshot i shared is the design i created using flexbox and not best practices. But it is the actual design.
Here is the codepen of what i am trying to do now :
https://codepen.io/Zeshan-Merchant/pen/NWeQpZW
Inside this codepen's javascript, there is a dummyArray of objects, which i am supposed to iterate and display the values inside my cards.
The javascript code is of my old design just to give you guys the idea, how i was displaying the data.
Now, i used to append a lot of divs, like as you can see, there are bunch of key:value pairs inside the card/article. My question is, without using so much of spans and stuff, how can i style the key and values differently? In my old version, i used so many classes to style them but i got some advice from some people saying that its not a good practice. I was able to cut off the excess wrapper divs but now i am confused how should i style the key differently and value differently? What i am thinking is to add them in seperate spans but then it would be spans inside of spans.
What i am trying to achieve is the screenshot design but in a better way, also i am going to use the same array of objects.
Is it possible to style the key value differently without adding too many elements through javascript?
Also, the html inside my codepen is what the actual structure of the cards will look like after the displayData function runs. If i can use any other tags instead of spans, do let me know.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
