Move section from middle to left position?

Store Design
, , , , , , ,
1

Hi, can someone help me move this section from middle to left (only on computer device)

(I have attached photos below - the blue part is what i want to get replaced)

Link for my website.: https://www.melchiorjewelry.com/collections/deluxe-moonstone-collection

Thank you so much, hope someone can help me out here!

Skærmbillede 2024-09-20 kl. 18.17.34.jpg
Skærmbillede 2024-09-20 kl. 18.17.34.jpg2543×1300 171 KB

.

.

.

.

.

.

.

.

@GemPages_Agents

@KetanKumar

@hammadCodes

@PaulNewton

@Ninthony

@dmwwebartisan

@ExpertRookie

@MandasaTech

@GemPages

@Mike-Omega

@PageFly-Richard

@tobebuilds

@BSSCommerce-B2B

@BSS-TekLabs

2

Hey @stinem123

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-1726850864110.png
Moeed_0-1726850864110.png1566Ă—703 186 KB

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

Best Regards,
Moeed

3

Hi @Moeed , I dont understand how this worked at the photo you sent, because when I added the code it only moved the sections around, and not the circle section - I have attached before and after photos for you below. Thanks!

Skærmbillede 2024-09-20 kl. 18.54.02.png
Skærmbillede 2024-09-20 kl. 18.54.02.png2992×1630 428 KB

Skærmbillede 2024-09-20 kl. 18.53.56.png
Skærmbillede 2024-09-20 kl. 18.53.56.png2992×1630 426 KB

4

Hi @stinem123
Please put this css in theme.liquid before body closing tag

Thanks!

5

Hey @stinem123

Try this updated code and let me know.

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

Best Regards,
Moeed

6

Hi @stinem123

Check 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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

@media only screen and (min-width: 749px){
.bubble-slider-template--23686647742812__ss_circle_menu_pro_wwUxBG {
    margin-left: 0 !important;
    padding-left: 3.3vw !important;
}
}

And save.

Result:

Made4uoRibe_0-1726852296281.png
Made4uoRibe_0-1726852296281.png1646Ă—552 80.3 KB

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

7

Hi @stinem123 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1726852168358.png
BSSCommerceB2B_0-1726852168358.png400Ă—195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (min-width: 768px) {
  .bubble-slider-template--23686647742812__ss_circle_menu_pro_wwUxBG {
    max-width: unset !important;
    margin-left: 60px !important;
  }
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1726852296019.png
BSSCommerceB2B_2-1726852296019.png1554Ă—842 199 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

8

Thank you so much @pawankumar , this worked great! Really appriciate!