somebody has tips to use images with fixed sizes and make them scalable?
All feedback is welcome offcourse. But if anyone knows how to create that grid for larger screens without media queries i would like to know.
All feedback is welcome
No comments
What challenges did you encounter, and how did you overcome them?No comments
What specific areas of your project would you like help with?All feedback is welcome
Hi,
I see what you mean. But then the social container doesn't overflow the container. It will be cut off.
Haven't found a solution for that yet.
I am getting better at using media queries and making different screen sizes adapt to my web page.
What challenges did you encounter, and how did you overcome them?Struggled to overcome them but I didn't know how to make an absolutely positioned element adapt to different screen sizes. I'm guessing that you have to have several media queries in place to keep an absolutely positioned element in one spot. I only had one for 400px for mobile.
What specific areas of your project would you like help with?More overall practice. I am excited for Javascript
Hi unfortunatly i can not view your code because i am getting an error. But based on looking on the page itself. I see that the responsiveness is not perfect. Especcially for the midsized screens. This is something that needs attention.
And the second thing is the placing of your social icons component is not how it should be. For midsize screens and larger screens it should stick to the right like in the designs. If you slide the size of the screens it does not stay in place. And for mobile it should fall over the author section. You can achieve that with position: absolute; inset: 0;
Hope you can use this.
The responsiveness is good. But de background image in the footer is not entirly responsive. For the screensizes given in figma it is good. Next time in a real project i would pay attention to the image so it is more scalable.
What challenges did you encounter, and how did you overcome them?Because the background images for the footer had fixed sizes i wasnt able to get it entirly responsive
What specific areas of your project would you like help with?somebody has tips to use images with fixed sizes and make them scalable?
Hi,
Thanks for your feedback. Your right i didn't think of that. But i will correct that.
Getting the three different layouts on mobile, tablet and desktop to closely match the design. Next time I would like to do a cleaner set of sections and to make the margining and padding easier.
What challenges did you encounter, and how did you overcome them?This was my first full page layout on Frontend Mentor.
This landing page was harder than it looked. I had not used background images much before, so had to do bit of trial and error on those.
I also found switching between the different number of hero section images on mobile/tablet to desktop tricky, but overcame it by using background images for the hero section on the desktop layout.
What specific areas of your project would you like help with?Nothing specific, but always looking for suggestions on how to improve! Especially if there was an easier/more efficient way to do things. 💪
Hi,
Your html looks pretty good. So props for that. But i would use a tag instead of button. Because the a tag has a download attribute.
Your css looks also pretty good. So keep it up.
I'm most proud of using the CSS grid. This was my first time really using it, & I'd been using flex box much more recently.
What challenges did you encounter, and how did you overcome them?I struggled a little bit with getting the grid sizing & layout right. The columns weren't the right width & for most of the boxes, the text wasn't filling up the box. I easily solved this issue by removing a line of css, unfortunately I have no idea what it was i removed, I can't remember. But it works now!
What specific areas of your project would you like help with?As usual, anything you think I should know or anything I could improve on.
Hi, For the first time using it you did a really good job.
By looking at the live link i see that the responsiveness is not a 100%. If i slide the screen to a smaller width then i see that the grid moves out of the screen.
HTML:
CSS:
Hope you can do something with this feedback.
Grtz Sven
HTML:
CSS:
Your responsiveness is not good yet for the mobile version. The cards are not centered and the text above your cards isn't getting smaller in width and font size. I would advise you to take a look at the clamp function of css. With this you can make 95% of the responsiveness without media queries.
for text elements you can use max-width: 60ch. for example. Then that element won't show more dan 60 characters on one line. This way you adding more responsiveness to your text elements.
Put only things in your css what you really need to keep your css file as short as possible.
For example:
/* 3. Add accessible line-height / line-height: 1.5; / 4. Improve text rendering */ -webkit-font-smoothing: antialiased; }
/* 5. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* 6. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; }
/* 7. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* 8. Improve line wrapping */ p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
This is not needed.
And if you reset the margin don't forget to reset the padding to.
These are the biggest things i saw and i hope this feedback helps you.
Regards Sven
