Need Help in making css component responsive

[Dilip_Adiga]

Hi Guys,

After endless tries and following some resources in community finally I was able to create css for my choice component

But it somehow is not aligned to the centre and dont think its responsive as it looks weird in mobile view
Medium Screen

Big Screen

Mobile Screen

Is there a way I can make it responsive so that it looks good on all screens?

This is my CSS code

.container {
display: flex;
justify-content: center; /* Center horizontally /
align-items: center; / Center vertically, optional /
height: 100vh; / Full height of the viewport, adjust as needed */
}

.library-view {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0 -5px; /* Adjust the margin as needed /
flex-wrap: wrap; / Allow wrapping on smaller screens */
}

.library-view li {
border-radius: 10px; /* Rounder button edges /
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: none;
background-color: #d6dbe0; / Set background to #d6dbe0 for non-selected buttons /
color: #314664; / Set text color to #314664 for non-selected buttons /
width: calc(25% - 20px); / Adjust the width calculation /
margin-right: 10px; / Adjust the spacing between buttons */
}

.library-view li:last-child {
margin-right: -10px; /* Remove margin from last button /
width: calc(25% - 10px); / Adjust the width calculation */
}

.library-view li.selected, .library-view:not(:has(.selected)) li:first-child {
font-weight: 900;
border-radius: 10px; /* Rounder edges for selected button /
background-color: #1A3665; / Set background color for selected button /
color: white; / Set text color to white for the selected button */
}

/* Media query for tablets and smaller screens /
@media (max-width: 768px) {
.library-view {
padding-left: 10px; / Reduce left padding for smaller screens /
justify-content: center; / Center buttons for smaller screens */
}

.library-view li {
width: calc(33.33% - 15px); /* Adjust width for 3 buttons per row on smaller screens */
margin-right: 5px;
}
}

/* Media query for phones /
@media (max-width: 480px) {
.library-view {
padding-left: 5px; / Smaller padding for small screens */
justify-content: center;
}

.library-view li {
width: calc(50% - 10px); /* Adjust width for 2 buttons per row on very small screens /
margin-right: 5px;
margin-bottom: 10px; / Add margin below to space buttons in two rows */
}
}

Also wanted to know wether it takes screens end to end to centre or takes container width only?

Thank you in advance for your help.

Regards,
Dilip

[Dilip_Adiga]

Hi Guys,

Got it to work using the CSS below

/* Center the container horizontally on all screen sizes /
.container {
display: flex;
justify-content: center; / Center horizontally /
align-items: flex-start; / Align items to the top /
padding: 0;
margin: 0 auto; / Center the container itself /
height: 100vh; / Full height of the viewport, can adjust as needed /
box-sizing: border-box;
width: 100%; / Ensure the container takes full width of the viewport /
max-width: 1200px; / Optional: Limit the max width for larger screens */
}

/* Library view styling /
.library-view {
display: flex;
justify-content: center; / Center buttons horizontally /
list-style: none;
padding: 0;
margin: 0 auto; / Center the entire library view /
flex-wrap: wrap; / Allow wrapping on smaller screens /
width: 100%; / Ensure the width takes the full container /
max-width: 100%; / Take full available width */
}

/* Styling for each list item /
.library-view li {
border-radius: 10px;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: none;
background-color: #d6dbe0;
color: #314664;
width: calc(25% - 20px); / Adjust the width calculation /
margin: 10px; / Use consistent margin for all sides */
}

/* Ensure last item does not overflow /
.library-view li:last-child {
margin-right: 0; / Remove right margin for the last item */
}

/* Style for selected items */
.library-view li.selected,
.library-view:not(:has(.selected)) li:first-child {
font-weight: 900;
border-radius: 10px;
background-color: #1A3665;
color: white;
}

/* Media query for tablets and smaller screens /
@media (max-width: 768px) {
.container {
padding-left: 0; / No padding for smaller screens */
}

.library-view {
justify-content: center; /* Center the buttons */
}

.library-view li {
width: calc(33.33% - 20px); /* 3 buttons per row */
margin-right: 5px;
}
}

/* Media query for phones /
@media (max-width: 480px) {
.container {
padding-left: 0; / No padding for phones */
}

.library-view {
justify-content: center;
}

.library-view li {
width: calc(50% - 20px); /* 2 buttons per row on phones /
margin-right: 5px;
margin-bottom: 10px; / Add spacing between rows */
}
}

Regards,
Dili[