Move position of 'Shop' Button and Collection Text on MOBILE only - using Modular 4.0

Store Design
1

Hi,

We’re trying to change the button position and collection name positions on our homepage (landing page) for the MOBILE version of our site. We want this to apply to ALL our collections.

The collection name (text) and buttons display on the bottom left for desktop view, which works well. But they are automatically centered on the mobile view. We’d like these to be displaying in the same way as desktop, or at least at the bottom of the image.

I’ve attached a sample of our desktop and a sample of our mobile for one of the collections on our homepage.

Any help would be greatly appreciated!

Desktop:

Desktop version of collections.png
Desktop version of collections.png1338×728 154 KB

Mobile:

Mobile version of buttons.png
Mobile version of buttons.png442×323 65.6 KB

3 Likes
2

Hey @CAA

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1693028903353.png
Moeed_0-1693028903353.png298×196 36.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @CAA
please add this css Asset > base.css and paste this at the bottom of the file:-

@media screen and (max-width: 769px) {
.collection-block__info {
top: 75%;
right: 70%;
}
h3.collection-block__title {
font-size: 15px;
}
.collection-block__info .button {
padding: 5px 25px;
}
}
4

@CAA - can you please share this page link?

5

Hi @CAA

You can try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 767px){
.collection-block__info.text-position--bottom_left {
    justify-content: flex-start !important;
    align-items: end !important;
}
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
6

Thanks Moeed! This worked

7

Thanks Ribe-Dagandara, this worked!