Debut theme center images side by side page

Store Design

Topic summary

Goal: center two side-by-side images on a Debut theme page and remove the black underline/border beneath the first (clickable) image.

What happened:

  • Store URL shared for review. Custom CSS was added in the theme to center the images and remove the underline/border. The requester confirmed this worked.
  • Additional spacing between the two images was achieved by adding a left margin via CSS on the image elements.
  • A separate suggestion introduced a mobile-specific CSS media query (@media max-width: 989px) to adjust image margins on smaller screens.

Latest update:

Key terms:

  • CSS (Cascading Style Sheets): styling rules added in theme.liquid and assets/theme.css to control layout and appearance.
  • Responsive: layout adapts properly to mobile screen sizes.

Status:

  • Desktop alignment, border removal, and spacing resolved.
  • Mobile responsiveness issue remains open with no confirmed solution yet.
Summarized with AI on January 29. AI used: gpt-5.
1

Hi how can I align these 2 images in the center of the page? And remove the black line under the first one (it’s a clickable image with the like that opens the magazine).

Immagine 2023-03-24 111031.jpg
Immagine 2023-03-24 111031.jpg1731×891 95.9 KB

2

Hello,

Please provide store url

Thank you

3

https://lenskiofficial.com/en/pages/magazine-list

4

Hello @David257

to center the image and remove border below image follow this steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find layout > theme.liquid and paste this at the bottom of the file:

Hope this works best

Best wishes !

1 Like
5

Thank you so much it works! How to add some space between the two images?

6

@David257

Please add this css with previous css

.template-page .page-width .grid__item img {
	margin-left: 20px;
}

If this helpful then like and accept the solution

1 Like
7

Hello @David257

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/theme.css theme file.

  3. Add the code at the end of the file:

@media only screen and (max-width: 989px) {
.template-page .page-width .grid__item img{
    margin-left: 40px !important;
}
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

8

Hey last thing I just noticed, when I open this page on mobile https://lenskiofficial.com/en/pages/magazine-vol-1 It’s not responsive! @infoatcodelab7

9

Hey last thing I just noticed, when I open this page on mobile https://lenskiofficial.com/en/pages/magazine-vol-1 It’s not responsive! @infoatcodelab7