Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first Design with Sass Second attempt

@norman02

Desktop design screenshot for the Blogr landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I got the background working this time. Still having trouble getting drop down menus to line up.

Feedback welcomed!

Community feedback

@Skidragon

Posted

Hi norman02, for spacing list of links between your elements I would look into the lobotomized owl selector * + * since the footer links are kind of squished. Also for your buttons, you can make your buttons grow relative to your text in the button and don't have to use a set width and rem for padding. I would look up em vs rem by Kevin Powell, he does a good explanation. Essentially use em on the padding to set your width and height of your button instead of the rigid width and height properties. Example:

.btn {
display: inline-block;
background-color: white;
padding: 1em;
color: #FF505C;
font-weight: bold;
border-radius: 28px;
}

if you change the font size later for your button in a media query, the width and height of the button will grow with it. Also it will grow or shrink depending on how much text you add into it.

2

@norman02

Posted

@Skidragon thanks for the advice and the article!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord