@riyad-96
Submitted
@irthifa
@riyad-96
Submitted
@irthifa
Posted
Hello there, Kudos to getting the solution as close to the design as possible!
If I may, one improvement I could suggest is getting the blog image (main image) in the mobile view close to the design. If you look closer it is cropped in the mobile view. You could try using CSS object-fit
to get that outcome.
you can read more about CSS object-fit
here
Once again the solution you submitted is great!
happy coding :)
@jopeeter
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud to finish the challenge, i think next time with more experience, i can make the styling shorter.
What challenges did you encounter, and how did you overcome them?
I had a hard time deciding how to center the QR code, i made some research, saw a lot of samples, and proceed what i think would be the more flexible solution.
What specific areas of your project would you like help with?
I'm still new on deciding how to approach styling, it would be best if i could have some help deciding the simplest methods.
@irthifa
Posted
Hello there, Nice effort on this challenge!
I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.
Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for:
body
p
h1, h2, h3, h4, h5
ul, ol
table
and
links
We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.
/* || UTILITIES */
.nobullets {
list-style: none;
margin: 0;
padding: 0;
}
/* … */
/* || STORE PAGES */
.product-listing {
/* … */
}
.product-box {
/* … */
}
By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.
article.main p.box {
border: 1px solid #ccc;
}
If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,
.box {
border: 1px solid #ccc;
}
This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.
You can read more about this here
I hope you find this useful!
Happy coding!
Marked as helpful