SLEEK theme, CSS to adjust content position on mobile only?

Store Design
, , ,

Topic summary

A user seeks CSS code to adjust the image text overlay position on their Sleek theme homepage hero section—specifically to display as top center on mobile while keeping middle center on desktop.

Problem:

  • Current settings apply globally across all devices
  • Desktop positioning (middle center) works fine
  • Mobile needs different positioning (top center)

Solution Provided:

Add this CSS to the bottom of theme.css file:

@media only screen and (max-width: 768px) {
  .content-overlay--middle-center {
    justify-content: normal;
    padding-top: 25px !important;
  }
}

Process:

  • Navigate to Online Store → Edit Code
  • Open theme.css
  • Paste the media query code at the bottom
  • Save changes

The solution uses a mobile-specific media query (max-width: 768px) to override the default positioning only on smaller screens, allowing independent control of desktop and mobile layouts.

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

Hello, I was wondering if there is a CSS code to adjust the content position for the image text overlay setion, the hero on the page, just for mobile. On desktop I have it middle center but want to make it top center on mobile. https://taleology.com/?_ab=0&_fd=0&_sc=1

2

Hello,

It’s not clear exactly what you want to acheive can you clarify more and attach an image of your requirement

3

Of course. Essentially I want to have the content top center on mobile render. But right now I can only set one global that reflects across desktop and mobile.

4

Screenshot 2025-01-22 at 5.06.08 PM.png
Screenshot 2025-01-22 at 5.06.08 PM.png1034×1410 212 KB

5

Its hidden with password I can’t access it to give you the solution

6

Removed the password for now

7

Hello again,

Go to online store then chose edit code

Open your theme.css file and paste the following code at the bottom

@media only screen and (max-width: 768px) {

.content-overlay–middle-center {justify-content: normal; padding-top: 25px !important;}

Save and its done

}