How can I adjust text alignment and position on slider images?

Store Design

Topic summary

A user working with the Funiter home 5 theme (slider V3 liquid) needs help with three slider customization issues:

Main Issues:

  1. Adjusting font size, font type, and position for three text lines on each slider image
  2. Slider images being cut off on mobile devices
  3. Enabling automatic image sliding functionality

Proposed Solution:
A responder provided CSS code examples to address the styling concerns, including:

  • Custom font properties (size, family) and positioning using .slider-text class
  • Mobile responsiveness fixes using media queries (@media (max-width: 767px))
  • Container and image width adjustments (max-width: 100%, height: auto)

The code snippet demonstrates how to modify slider text appearance and ensure proper mobile display through CSS customization. However, the automatic sliding functionality (#3) was not directly addressed in the response.

Status: Partial solution provided; implementation details and automatic sliding feature remain unresolved.

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

Hello,

I am using the Funiter home 5 theme, slider V3 liquid.

On the slider there are 3 text line for each image,

  1. I like to set font size, font, and the position of each text.

  2. On mobie the slider image cut off.

  3. I like the slider to slide the images automatically.

Thanks.

site

2

Within this file, you will likely find code sections that output the text lines for each image. You can use CSS styles to modify the font size, font, and position of each text line. For example:

/* Example CSS for changing text styles and position */
.slider-text {
    font-size: 18px;
    font-family: "Arial", sans-serif;
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #ffffff;
    /* Add other desired styles */
}
/* Example CSS for mobile responsiveness */
@media (max-width: 767px) {
    .slider-container {
        width: 100%;
    }
    .slider-image {
        max-width: 100%;
        height: auto;
    }
    /* Adjust other styles for mobile screens */
}