Mobile layout was very difficult to achieve. I'm still not sure about the javascript code . And can anyone tell me how to change the color of svg icons.
ahmadabbani
@ahmadabbaniAll comments
- @deepika9107Submitted 11 months ago@ahmadabbaniPosted 10 months ago
Hello, I use the following CSS code to change the SVG color to orange: filter: invert(50%) sepia(80%) saturate(2235%) hue-rotate(354deg) brightness(99%) contrast(94%); There is a site where you can type the color you need for an SVG, and it will provide you with the corresponding CSS code. The site is: https://isotropic.co/tool/hex-color-to-css-filter/
0 - @pok9Submitted 12 months ago@ahmadabbaniPosted 12 months ago
Your desktop design is good; consider incorporating a mobile design as well.
1 - @W3byMJLSubmitted 12 months ago
Do you know a youtube or article that would discuss how to accomplish switching between the vertical (mobile) and grid (desktop) views without use media queries with just CSS Grid?
@ahmadabbaniPosted 12 months agohello, For the mobile design, modify the grid container to have a single column and five rows,and arrange the grid items in their intended order using one media querie like this: @media (max-width:768px){ .grid-container{ grid-template-rows: repeat(1fr 0.5fr 0.5fr 0.5fr 1fr); grid-template-columns: 1fr } .grid-container .grid-item:nth-child(1) { grid-column: 1; grid-row: 1; } .grid-container .grid-item:nth-child(2) { grid-column:1; grid-row: 2; } .grid-container .grid-item:nth-child(3) { grid-column:1; grid-row: 5; } .grid-container .grid-item:nth-child(4) { grid-column:1; grid-row: 3; } .grid-container .grid-item:nth-child(5) { grid-column:1; grid-row: 4; }
I hope this is helpful and addresses what you're looking for.
0 - @facuprostSubmitted 12 months ago@ahmadabbaniPosted 12 months ago
hello, Nice desktop design! Consider adding a mobile version too.
Marked as helpful1 - @Durga-prasad-1Submitted 12 months ago
- The white borders around the QR image is not same as question. Can anyone give suggestion about it.