Responsive Club Website (CSS)

Well done! it looks nice and I like it especially the banner section and the background for the body element.

The only few things I could find when you open the site on small screens (cell phones around 390px wide) what happens is:

  1. The nav bar menu looks so small and I think ( based on my little experience, I’m just beginner like you but we help each other ) using flex-wrap or flex-direction: column; with align-items: center; and font-wieght or size can help.

  2. The testimonials box would look better if it’s centered ( it appears on the left ).

  3. The form looks so small, try to make it more big, and don’t forget to add margin top and down for “I’m ready” buttom.

thats all :slight_smile:

1 Like

Now that I’m thinking about it the navbar could totally turn into a dropdown menu for small screen sizes, instead of just shrinking the font size. Would be way more readable.

The form could definitely get bigger on smaller screen sizes too.

Thank you for the feedback, I really appreciate it!

Yow are welcome. I am waiting to see it again after these modifications have been done.

Please have a look to my project, when you have time, and tell me your opinion and any feedback you might have.

Here you can find the Live site.

Here you can find the code.

Thanks.

I combined this task with the previous one, and just added responsive design to the fictitious company website I made for my girlfriends sewing hobby - haven’t gotten around to writing her any bios though!

Incorporated most of my learning from CSS and HTML into this one site so it’s a good bookmark of where I am at the moment pre-JavaScript!

Live Site:
https://jakeyblee.github.io/friendsofthethread/

Code:

Feedback appreciated!

2 Likes

Heya! Thanks for the thoughts!

Could you tell me which browser/OS you’re seeing this on and perhaps a screenshot? Your suggestions make me think you’re not seeing the design as it’s meant to be (the nav is full-width, the ‘join us’ content is on the right because there’s a picture on the left)

Thanks!

Hello!
I use Chrome/Win 11.

  1. The heading " Join us in our studio" and the content belw would look better with text-align: left; (desktop view before any break point ).

That what I ment by “text-align:left” :

  1. The footer is more high compared to its content (desktop view).

That what I ment:

  1. The nav bar looks very small at 390px wide, I thank that “flex-wrap” can help.

That what I ment:
(the photo on the right : flex-wrap with a biger font-size)

Thanks!

1 Like

Hi! I’m not sure what club I made up exactly…? but I guess it doesn’t matter, all I know is that I learned a lot from this project

Live site: Amethyst
Repo: GitHub - farah-qistina/Amethyst



by the way, the mobile and computer versions have different backgrounds!

Feedback’s appreciatedd

4 Likes

Hi there!
Here’s my club.

Repo is available for feedback too.

Thanks in advance.

Hello!

Along with many others I decided to combine this project with the previous one.

You can find the live site here and the code is here.

Any feedback and suggestions are welcome!
Thanks! :relaxed:

Here is my completed responsive-club project!

It took awhile to figure out why one area of the page was wider than the rest. I was able to fix it in the css page by adding left: 0; in the div.

code : GitHub - eatwanderexplore/responsive-club: Codecademy project - Build your own club group page that will dynamically respond as you adjust the size of your screen

live page: EWE travel club

1 Like

This is so good. May I join? :rofl:

https://sophiewang0818.github.io/sophiewang/portfolio/

Hello.

I made a fake lego club in my city.

Here is my code: lincolnlegoclub/index.html at main · spectrumcoder/lincolnlegoclub · GitHub

Here is the live website: Lincoln Lego Club

I’d love some feedback!

Thanks

Here’s my live site!
https://moonrivervoyager.github.io/viciouscircle/

Not going to lie, I didn’t really use best practices for this one in terms of commenting and organisation because I was so eager to jump into learning Java instead.
But if you’re still interested in looking at the messy code, it’s on my Github. I had fun with writing this one though!

It’s happening guys we are DOOMED! Catatonic

LOL! I like the animation

Hi everyone, please see below my work on this project.
I realised the (li) items are not properly displayed when the site is viewed on mobile phones, the same applies to the (body-text ) container and it’s elements and the (recomendation) container and its elements.
I’ll be very grateful for some advice on how to fix this.
Thank You.

code: GitHub - pkansah/Nhyira-fitness-club.io
site : Nhyira Gym Club

Hello everyone,
Below is the link to my work.
https://28yg.github.io/Apex-swimming-club/

I will appreciate your comment.
Many thanks in advance.

Hello there,

Without disrupting your code too much, consider the followings:

  1. Removing the set height in the header - for example, the set height is commented out in the code below.
    .header {
    width: 100%;
    /* height: 3.75rem; */ This line was commented out.
    background-color:black;
    position:relative;
    }

  2. Also, removing the set height in the “.recomendation” class - for example, the set height is commented out in the code below.

.recomendation {
/* height: 12.5rem; */ This line was commented out.
width:100%;
background-color:olive ;
padding:1.25em 3.125em 1.25em 0.625em;
}

Thank You very much .I appreciate your advise.