# Need Help in making css component responsive

**URL:** <https://community.glideapps.com/t/need-help-in-making-css-component-responsive/76288>\
**Category:** Ask for Help\
**Created:** [September 11, 2024, 12:06pm UTC](https://community.glideapps.com/t/need-help-in-making-css-component-responsive/76288 "2024-09-11T12:06:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [September 11, 2024, 12:06pm UTC](https://community.glideapps.com/t/need-help-in-making-css-component-responsive/76288/1 "2024-09-11T12:06:01Z")

</div>

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**

 ![Screenshot 2024-09-11 at 5.24.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73ae36b8b9b1a1772838335cad95e243e78a3945.png)

**Big Screen**

 ![Screenshot 2024-09-11 at 5.25.54 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/238614ae5f340fe4112e0e0164eae6d67f11e936.png)

**Mobile Screen**  
 ![Screenshot 2024-09-11 at 5.26.26 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c905f1837f97ec4f5b6b425dbdb18821ac328c6.png)

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

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [September 12, 2024, 6:12am UTC](https://community.glideapps.com/t/need-help-in-making-css-component-responsive/76288/2 "2024-09-12T06:12:38Z")

</div>

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[

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 19, 2024, 6:13am UTC](https://community.glideapps.com/t/need-help-in-making-css-component-responsive/76288/3 "2024-09-19T06:13:36Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.