First responsive website#28
Conversation
I created a responsive website, but still had issues with the horizontal scroll. It was also confusing to know the breakpoints for the media queries, since on Chrome Inspect tool the px are different from what is said in the Technigo videos, so I wasn't sure - apologies.
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
Hi! Great job with this page - it's so pleasing to look at and the design is very nice and playful. I think you managed well with the responsiveness, I don't see any horizontal scroll. And regarding the DRY - it's always hard - no matter how long you've been coding. Just the fact that you're thinking about it is super. It will get easier once you practice how to structure your file and such. Keep up the good work!
| <main class="main-container"> | ||
|
|
||
| <section class="hero-container"> | ||
| <h1>We <em>humanise</em> brands.<br> We <em>connect</em> them to culture. <br> We make content that <em>converts</em>.</h1> |
There was a problem hiding this comment.
I really like this effect! Just know that <br> is not being used anymore and that you could achieve line breaks with flexbox :)
|
|
||
| <section class="work-container"> | ||
| <h2>Our Work</h2> | ||
| <section class="image-gallery"> |
There was a problem hiding this comment.
Would be nice to keep all images in a folder so that they don't clutter the code folder :)
| <img class="clientimg" src="pepsi.png" alt="Pepsi"> | ||
| </section> | ||
| <section class="clients-container-button"> | ||
| <a class="button" href="./services.html"> OUR SERVICES </a> |
There was a problem hiding this comment.
For "fake" links you could use "#" as the href
| body { | ||
| background-color: peachpuff; | ||
| background-color: #f3bbff; | ||
| animation: bgColor 50s infinite linear; | ||
| margin: 0px; | ||
| } |
There was a problem hiding this comment.
I really enjoy this background animation 😍
| <div></div> | ||
| </div> | ||
| <div class="header-left"> | ||
| <a href="./index.html"> <img src="logo.png" alt="Logo Fake Agency"></a> |
There was a problem hiding this comment.
Oh no, I wanted to know what font this was 😆
| @media screen and (max-width: 667px) { | ||
| h2 { | ||
| font-size: 50px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 1024px) { | ||
| h2 { | ||
| font-size: 80px; | ||
| } | ||
| } | ||
|
|
||
| h3 { | ||
| font-family: 'EB Garamond', serif; | ||
| font-size: 30px; | ||
| } | ||
|
|
||
| h4 { | ||
| font-family: 'Fira Sans', sans-serif; | ||
| font-size: 40px; | ||
| font-weight: 200; | ||
| } | ||
|
|
||
| @media screen and (min-width: 1024px) { | ||
| h4 { | ||
| font-size: 60px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 667px) { | ||
| h4 { | ||
| font-size: 25px; | ||
| } | ||
| } |
There was a problem hiding this comment.
You wrote that you struggled with the DRY principle so maybe you're already aware of this - but a good rule of thumb is to keep the media queries in order. If you're styling desktop first, then you can style desktop first, then tablet, and lastly mobile (or the other way around). Also, you can have many rules for many elements inside one media query. Something like this:
/*Default (desktop in your case)*/
h1 {
/*styling for default*/
}
h2 {
/*styling for default*/
}
h3 {
/*styling for default*/
}
h4 {
/*styling for default*/
}
/*Tablet*/
@media screen and (max-width: 667px) {
h1 {
/*styling for tablet*/
}
h2 {
/*styling for tablet*/
}
h3 {
/*styling for tablet*/
}
h4 {
/*styling for tablet*/
}
}
and so on
| font-size: 30px; | ||
| border: 2px solid black; | ||
| border-radius: 30px; | ||
| padding: 10px; |
There was a problem hiding this comment.
Try padding: 10px 30px; to get some more padding on the sides (can be needed - especially when you have a bit of border-radius)
| .container:hover .overlay { | ||
| opacity: 1; | ||
| border-radius: 20px; | ||
| } | ||
|
|
||
| .text { | ||
| color: white; | ||
| font-size: 50px; | ||
| position: relative; | ||
| justify-items: center; | ||
| top: 30%; | ||
| font-family: 'EB Garamond', serif; | ||
| } |
2 participants
Hello!
As mentioned in the readme, this is my first attempt at a responsive website. I only had time to create the homepage and not any subpages.
There are a few mistakes which I'm already aware of but unfortunately I didn't have time to fix them:
Thank you and I look forward to your feedback :)