Hello, I am having trouble. My heading and button are all the way at the bottom of the page. I would like to move them back up and I would also like the image banner photo to be cropped properly. Any help is appreciated!!
URL: tansokr.com
@gavboy555 - please open this page in customize settings, please check this section and check if you have an option to have content on image in mobile settings, something like image stacked , if no then we can force it using css
@gavboy555 Use this, let me know if this work
1. Open the Section Editor
-
In your Shopify admin, go to:
Online Store → Themes → Customize -
Navigate to the page where the issue occurs (usually the homepage).
-
Click on the “Image banner” or “Slideshow” section.
2. Adjust Banner Height & Content Position
Look in the section settings sidebar:
-
Height → set to something like
MediumorAdapt to first image. -
Content position → choose Top center or Middle center (instead of Bottom).
-
Image overlay → optional (for better text visibility).
If your theme supports it, this alone will move the heading and button back up.
Hello,
It looks like your heading and button are pushed to the bottom due to excessive section padding or custom CSS, and your banner image is cropping because of its dimensions or the theme’s “cover” settings.
Quick fixes:
1. Go to Online Store → Themes → Customize → select the hero section → reduce padding/margin for the heading/button.
2. Resize your banner to the recommended dimensions (around 1600Ă—600px) and adjust Image Fit/Crop in the section settings.
3. If needed, add this CSS to fine-tune:
.hero-section {
padding-top: 50px;
padding-bottom: 50px;
}
.hero-section img {
object-fit: cover;
width: 100%;
height: auto;
}
This should move your content up a
nd fix the banner cropping.