Found it! Appreciate your assistance and prompt response Ismael! :)

Hello Ismael,

I appreciate you sharing the CSS code for aligning the contents of the catalogue.

I tried to upload the code into Quick CSS, but unfortunately, there hasn’t been any visible change.

Also, I’ll remember to start a new thread if I have any further questions in the future.

Thanks

Hi Ismael,

Padding for the pills worked! Appreciate your help.

Can you also please advise how can I align the contents of the catalogue to center?

Kindly navigate to the link provided in the Private Content and view it in mobile.

Thanks

Hi Ismael,

I have tried adding the code and it seems to work fine on devices such as XR up to tablet dimensions. However, not all mobiles shows the tabs in one line. For your further assistance, please. Sharing with you the code for the pill-shaped tabs I included in the Quick CSS.

/* Tabs Pill Shape*/
.av-pill-tabs .av-tab-section-tab-title-container a {
background: #0B897A;
border-radius: 5px;
padding: 0!important;
margin-top: -10px;
overflow: hidden;
}

.av-pill-tabs .av-outer-tab-title {
padding: 0px!important;
margin: 0 !important;
}

/* Tab arrow */
.av-pill-tabs .av-tab-arrow-container {
top: 5px;
}
#top .av-pill-tabs .av-tab-arrow-container span {
background: #ffffff;
}

/* Add your Mobile Styles here */
#top .av-pill-tabs .av-section-tab-title {
margin-right: 8px;
padding: 0 !important;
}

.av-pill-tabs .av-inner-tab-title {
color: #FFFFFF;
font-size: 0.9em;
margin-bottom: 0px !important;
line-height: .5em;
padding: 8px !important;
}
}

• This reply was modified 8 months, 3 weeks ago by Renard. Reason: Edited css code