Frontend Mentor | ahmadabbani's profile

@deepika9107Submitted 11 months ago

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.

product_landing_page

2

ahmadabbani•140

@ahmadabbaniPosted 11 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

Pok•170

@pok9Submitted 12 months ago

testimonials-grid-section-pok9

1

ahmadabbani•140

@ahmadabbaniPosted 12 months ago

Your desktop design is good; consider incorporating a mobile design as well.

1

Mitchell Lazore•40

@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?

CSS Grid & Media Query

1

ahmadabbani•140

@ahmadabbaniPosted 12 months ago

hello, 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