How can I adjust the button position on mobile for featured collections?

[rugsrusonline12]

Hello,

On the homepage of my website I have featured collections. I wanted to move the button next to the header of each featured collection. I did this using this code (Edit Code > Assets > theme.scss.liquid)

.collection__view-all a:not(.link) {
position: absolute;
top: 0;
left: 420px;
transform: translateX(-50%);
margin-bottom: 2.5rem;
}

@media (max-width: 600px) {
position: absolute;
.collection__view-all a:not(.link) {
left: 50%;
}
}

This worked great - only on the desktop version. On the mobile version, the buttons are nearly off the screen. How can I move the buttons a little bit to the left on the mobile version?

I am using the dawn theme and my website is www.rugsrusonline.co.uk

Thank you in advance!

[Made4uo-Ribe]

Hi @rugsrusonline12 ,

I understand that you want to center the button view all in the mobile view.

Base in your code. I think there is an error of it.

@media (max-width: 600px) {
.collection__view-all a:not(.link) {
position: absolute;
left: 50%;
}
}

I just fix the error if its still not working you can try this one.

@media only screen and (max-width:600px){
.center.collection__view-all a {
    position: absolute;
    left: auto;
}
}

Same Instruction.

Result:

I hope it help.

[NomtechSolution]

To adjust the position of the buttons for the mobile version, you can modify the existing CSS code and add a media query specifically targeting smaller screen sizes. Here’s an example of how you can update the code:

.collection__view-all a:not(.link) {
  position: absolute;
  top: 0;
  left: 420px;
  transform: translateX(-50%);
  margin-bottom: 2.5rem;
}

@media (max-width: 600px) {
  .collection__view-all a:not(.link) {
    left: 50%;
    transform: translateX(-50%) translateY(0); /* Add this line */
    margin-bottom: 2.5rem; /* Adjust the margin as needed */
  }
}

[PageFly-Noah]

Hi @rugsrusonline12

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly