Change image position on mobile in mega menu

Technical Q&A
,

Topic summary

A user working with Shopify’s Pipeline theme needs help repositioning images in a mega menu for mobile display.

The Issue:

  • Desktop layout works fine with 4 treatment images and 2 skincare brand images
  • To maintain consistent image sizing, 2 white placeholder blocks were added
  • On mobile, this causes the 2 skincare images to display diagonally instead of stacked on the left side

Solution Provided:
A community member offered CSS code to be added to the base.css file using a media query targeting mobile screens (max-width: 749px). The code uses grid-area property to reposition elements.

Follow-up Problem:
The CSS fix successfully repositioned the images, but text overlays added through the theme customizer now extend slightly outside the image boundaries. The user requested an adjustment to keep text within the images while maintaining the new layout.

Additional CSS targeting font size was provided to address the text overflow issue. Screenshots were shared to illustrate both problems.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I’m using a Pipeline theme.

I have a mega menu where I can add images. I have one where I have 4 treatments section and then the other skincare where I have only 2 skincare brands.

The problem is in order to have those 2 skin care images the same size as those 4 treatment images I need to add 2 white blocks in the “coustomise theme” option on the outside. It looks fine on desktop however, on mobile those 2 skin care brands are diagonally because of those two white blocks.

I would like those two images to be stacked and on the left side.

Is there a way to move those images?

https://www.injectual.com/

1 Like
2

Hi @Michau00

You can try the code below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
@media only screen and (max-width: 749px) {
#sliderule-69c594729206d58862d9aab6822903ac > div.sliderule-grid.blocks-4 > div:nth-child(2) {
    grid-area: 1;
}
}

See result below:

made4Uo_0-1683564292688.png
made4Uo_0-1683564292688.png706×791 66.6 KB

3

Thanks

4

Hi @made4Uo Thanks! It worked. However, the images have text that I add over also in the “customise”. With your change they slightly go outside of the images. Is it possible that they resize and stay within the image? Thanks!

Screenshot 2023-05-08 at 18.05.32.png
Screenshot 2023-05-08 at 18.05.32.png382×532 71.2 KB

5

Hi @Michau00

@media only screen and (max-width: 481px) {
.sliderule__wrapper h2.hero__title.h3 {
    font-size: 22px;
}
}

Add this code below to your theme.css