People also searched for

[ChrisW3]

I have added a "people also searched for" section on this page: https://www.physioworldshop.co.uk/collections/treatment-couches

I would like it styled more like this:

https://www.argos.co.uk/browse/appliances/vacuum-cleaners-and-floorcare/vacuum-cleaners/c:29693/

Is there some way of doing this?

[Shadab_dev]

If i am not wrong you probably have added this section as html. This is possible with css but will require the html

Please reach out from personal contact links below as it will require collab access to the store to make things easy.

Best
Shadab

 

[ChrisW3]

<div class="related-categories">
<h3>People also searched for</h3>
<a href="/collections/electric-couches">electric massage bed</a><br> <a href="/collections/massage-beds">massage couch</a><br> <a href="/collections/treatment-couches">examination couch</a><br> <a href="/collections/hydraulic-couches">hydraulic massage bed</a><br> <a href="/collections/treatment-couches">medical couch</a><br> <a href="/collections/treatment-couches">physio bed</a><br> <a href="/collections/electric-couches">electric treatment bed</a><br> <a href="/collections/treatment-couches">treatment couch</a><br> <a href="/collections/electric-couches">electric massage couch</a><br> <a href="/collections/massage-beds">massage table uk</a><br> <a href="/collections/treatment-couches">treatment beds</a><br> <a href="/collections/electric-couches">electric treatment couch</a><br> <a href="/collections/treatment-couches">physio plinth</a><br> <a href="/collections/treatment-couches">physiotherapy table</a><br> <a href="/collections/treatment-couches">physiotherapy beds</a><br> <a href="/collections/treatment-couches">physiotherapy plinth</a><br> <a href="/collections/electric-couches">electric therapy couch</a></div>

[Shadab_dev]

Now i will have to try this on codepen😅

[Shadab_dev]

Here is the link to the codepen. https://codepen.io/shaddu-dev-ali/pen/NWQeMaO

Replace your html with mine. And the css under style tags

<style>

my css code

</style>

Pretty sure you can take help from the code and make changes as per your liking.

Best
Shadab

[ChrisW3]

Thanks Shadab, this is all looking good apart from it overhanging on mobile view:

[Shadab_dev]

Here's the updated css

.links{

  display: grid;

  grid-template-columns: repeat(5, 1fr);

   width: 80%;

  margin: 0 auto;

  text-align: center;

}

.links a{

  text-decoration: none;

  color: #000000;

  text-transform: capitalize;

  margin: 10px;

}

.links a:hover{

  background: #eeeeee;

  padding: 5px;

  border-radius: 50px;

}

@media(max-width:767px){

  .links{

  grid-template-columns: repeat(1, 1fr);

    }

  .links a{

    margin: 5px;

    }

  }

Please make the adjustments accordingly