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

Responsive Social Proof Section

Soojeong 220

@kongguksu

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used position: absolute on the two images(bg-pattern files) to make the background. I had to adjust their sizes and positions in media queries multiple times. Is there a different way to use multiple image files to create the background of the website?

Also, I spent way too much time on my queries.css file and it became quite long. I was wondering if there are good tips to make the file look more organized and not so repetitive.

I've also noticed that on the phone, the mobile version of my website is super hard to scroll. Is there a way to fix this?

Community feedback

@JoseLuisFV

Posted

Hi, I saw your solution, for background image, i recommend the css property background to images because in those cases it is only decorative

body{
 background: 
        url('../images/bg-pattern-top-desktop.svg'),
        url('../images/bg-pattern-bottom-desktop.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
}

For mobile view, the reason is that you have double scrollbar, and i don't know what is the cause.

This is my repo This is my live.

But your work is great!, dont get down, you can do it, sorry this is not my native language

Marked as helpful

1

Soojeong 220

@kongguksu

Posted

@JoseLuisFV Thank you for your example code! I'll try this out. Thanks for the encouragement as well :)

0
Brandon 290

@branalex94

Posted

Hello there! I hope you are well. I'm here hoping my advice can help somehow. I've checked your live site and it seems you are using a div to set the background images. I'd recommend investigating the "background" CSS property because with it you can apply multiple images at once and it may be more convenient that way.

By having that div, it seems like it's ocuppying some space it should'nt and you end up having double scrolling on mobile.

To use different images depending on size I'd recommend you to use media queries as well. Just check the background property and it may help a lot. Hope i could be of help! If it may be useful, you can check my solution. It's not perfect though, but it may give you some answers.

Marked as helpful

1

Soojeong 220

@kongguksu

Posted

@branalex94 I'll try using the background property to fix the scrolling issue. I'll definitely check out your solution too. Thank you for your feedback!

1

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