How do minimize space between words/links in "quick Links" in Warehouse Theme

Store Design
, ,
1

Hi community,

Recently I added quick links section in Warehouse theme that will be visible only on mobile phones. The issue I have is that there is large spacing between the words so it takes too much space on the phone screen. I would liketo minimize the space between the words so it will IDEALLY be in a single line. If not single line then 2 lines, due to many links, it also fine. You can see it using mobile phone (horizontal or vertical view) at www.partyofgoods.com

Many thanks in advance for your help.

2

Hi @PartyOfGoods
You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

.quick-links {
  flex-wrap: nowrap;
  border: 1px solid !Important;
  overflow: scroll;

}
1 Like
3

Hello @PartyOfGoods

Try this code - it will be helpful for you:

Go to the online store >Theme >Edit code>Assets>theme.scss.css>Add code in this file.

@media only screen and (max-width: 768px) {
.quick-links__link {
    width: 20%;
}
1 Like
4

@ExpertRookie Thank you for that! It did out all the titles in a box that can be moved from left to right but only 3 titles ar visible and users need to assume that they need to slide to the left with their finger. I My goal is to have it completely visible like a menu that you can see on the desktop. I appreciate your help.

5

@oscprofessional Thank you for the reply. When I pasted it the who website went bizzare. all the pages became really wierd looking with no images etc. I appreciate youtrying to help!

6

@oscprofessional @ExpertRookie I managed to find a way! Thanks to both of you I got an idea. I checked in coding theme.scss.liquid and managd to see in lines 12123 and changed the % until I got the right spacing I wanted. Originally it was padding 24% and width 33.33333% and I changed to the best possible option to fit all my links.

@include at(‘tablet-and-up’) {
.quick-links__link {
padding: 0px;
width: 10.333333%; /* we cannot use flex-basis due to a bug in IE11 as flex-basis does not take into account padding in this browser */
}

Thanks again and have a great weekend!