@matthew-marco
Submitted
Idk but I think I got alot of wrong things done here and I cannot write media for the phone screens so anyone can help me do that
@thekarthikr
@matthew-marco
Submitted
Idk but I think I got alot of wrong things done here and I cannot write media for the phone screens so anyone can help me do that
@thekarthikr
Posted
Hi Mathew, Your solution for this challenge comes really well But I recommend you try this with display: grid
instead of display:flex
. Also, you can make this responsive for mobile screen sizes using media queries.
I hope it helps, Have a great time.
Marked as helpful
@matthew-marco
Submitted
Is it regular to write all that @media
@thekarthikr
Posted
Hi there, You can try <picture>
element instead of writing media queries for the image.
<picture>
<source media="(min-width: 650px)" srcset="img_lg.jpg">
<source media="(min-width: 465px)" srcset="img_s.jpg">
<img src="img-xs.jpg">
</picture>
That would be so easier. Hope it helps , Have a great time.
@Md-Talim
Submitted
Thanks for reviewing my solution. I have some questions about units. Which unit to use for font-sizes, margin and paddings. Should i use %s or rem or ems for height and widths.
@thekarthikr
Posted
Hey Mohammad Talim, Absolute units(px ) are always fixed the value doesn't change. On the other hand Relative units are responsive For example % is Relative to the size of the container, vh and vw are relative to the viewport, and em and rem are relative to the font size. You can use rem units for fonts and em units for media queries. WHAT UNIT YOU USE IT DEPENDS ON WHAT PROBLEM YOU TRYING TO SOLVE.
Hope it helps. Have a great time.
Marked as helpful
@FlorimB
Submitted
I tried my best to complete this project, as you can see in my code, I am bad at naming things, please feel free to add suggestions about this and the project in general.
@thekarthikr
Posted
Hey Florim Bulica, Your solution for this challenge comes really well. Somehow we all are bad at naming for classes or come with a wired name. To avoid this I recommend you to use BEM naming convention/methodology it will make so easier .
For example:
<div class=about> <h2 class=about__heading> About </h2><p class="about__description> lorem ... </p></div>
To know more about BEM visit the link down below
https://getbem.com/naming/
And one more thing adding some padding around the footer would be better.
Have a great time.
Marked as helpful
@ajaychandru
Submitted
It was difficult to make svg image responsive i.e changing its width and height as the screen size changes . any suggestions?
@thekarthikr
Posted
You can add .mw-100
to the <svg>
so the image will always adapt to the width of its container.
Marked as helpful
@ajaychandru
Submitted
It was difficult to make svg image responsive i.e changing its width and height as the screen size changes . any suggestions?
@thekarthikr
Posted
Hey Ajay C, I Hope you are doing well. In your footer section, the Contact us link stands out from other footer links you can use nav-item and nav-link to fix that.
Have a great time.
Marked as helpful
@boypaida12
Submitted
@thekarthikr
Posted
Hey there, Hope you're doing well. Having a responsive website essential, Most of them access websites through their mobile, and I can see you using media queries on your website but it gets overflowing when I resize browser window.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I hope it helps. Happy coding.
Marked as helpful
@thekarthikr
Posted
Hey Dheeraj Kumar Yadav, I Hope you're doing well. I really like the results of your project, here are some suggestions that would improve your code. Your desktop version of this challenge is good but when it comes to mobile size it collapsed. Highly recommend you to consider responsive design
Add flex-direction: column
for mobile devices.
Hope it helps. Have a good time.
@festsnusa
Submitted
Hello everyone! I've tried to position article section with position: absolute, but failed. Now, my article section looks messy when you try to resize the window. So, if you know how to center article section or if you found some bugs, be sure to write down a comment.
Thanks in advance.
@thekarthikr
Posted
Hey Madhaus, Hope you doing well. Make your main class position relative and make your main-box class position absolute.
.main{ position:relative; }
.main-box{ position:absolute: //top right as you want }
Hope it helps , Have a great time.
@XoelVeiga
Submitted
Feel free to told me what to do better and I didnt know how to change the see more icon to white on hover cose it is a svg file, someone can help me with that?
@thekarthikr
Posted
Hey Xoel, There are a lot of methods to change the SVG image color on a hover state, here are a few SVG: hover{fill: red;}
you can find the fill property inside that SVG code, On the other hand, you can use filter
property to change the color of an SVG on a hover state.
To know more visit this link, https://css-tricks.com/change-color-of-svg-on-hover/
Hope it helps.
@wrongju
Submitted
I didn't make an adaptive.
@thekarthikr
Posted
Hey wrongju, Your solution for this challenge comes really well. Here are the changes that you will enjoy. Remove max-width in a container class, Having a responsive website essential, Most of them access websites through their mobile, so I recommend you use Media queries for the responsive layout. Media queries are a key part of responsive web design,
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope it helps.
@AhmedKamal1911
Submitted
I hope you can leave me some tips
@thekarthikr
Posted
Hey Ahmed Kamal, It's better to use display:grid
instead of display:flex
for this challenge.
gird-template-columns
and grid-template-rows
specify the size of the columns and rows, and how many columns and rows are in the grid layout. Want to know more about display: grid refers to the websites shown below.
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://cssgridgarden.com/
I hope it helps.
Marked as helpful