Hello,
I have an issue when opening my site on mobile, the text is below the image instead of being on the top. How can I please fix this :
Mobile :
Desktop : (correct behavior)
The site is https://mycompagnon.fr/
Thanks a lot,
Hi @RichardL
It seems that you have enabled the “Show content below images on mobile” option in the “Slideshow” section. Please follow these steps to turn it off:
- Go to Online store => Themes => Customize
- Then, select Homepage => Slideshow => Show content below images on mobile:
Please let us know when you get it done, and we will check it for you.
Hi @RichardL
Is this the result you want?
Maybe because your current theme does not have CSS for mobile screens. You can try following these steps:
- Step 1: Go to Online store => Themes => Edit code
- Step 2: Select the Section folder and find a file named “slideshow.liquid” or “flickity.liquid”. Continue to search for 2 tags with attribute style and change the parameters as shown below. Then, you save the file.
- Step 3: Select the Assets folder and find the file named “styles.scss” or “styles.css”. Then, you paste the following code at the end of the file. Then, save the file.
@media (max-width: 480px)
.caption {
position: absolute;
width: 60%;
top: 10%;
}
@media (max-width: 768px)
.caption .headline {
font-size: 16.333333px;
}
@media (max-width: 480px)
.caption .headline {
font-size: 16.333333px;
}
@media (max-width: 768px)
.caption .subtitle {
font-size: 10px;
}
@media (max-width: 480px)
.caption .subtitle {
font-size: 10px;
}
@media (max-width: 480px)
.caption-content .action_button {
font-size: 12px;
}
If you need further help, please let us know or share your store access with us. Then, we will help you out.
Thanks again for the instructions.
The file "slideshow.liquid" has the following content. It is different than your screen shot. What can I please modify on this code ? Thanks a lot
{% assign default = '1400x' %}
{% assign size1 = '480x' %}
{% assign size2 = '765x' %}
{% assign size3 = '900x' %}
{% assign size4 = '1000x' %}
{% assign size5 = '1100x' %}
{% assign size6 = '1300x' %}
{% assign size7 = '1500x' %}
{% assign size8 = '1700x' %}
{% assign size9 = '1900x' %}
{% assign size10 = '2000x' %}
{% if section.blocks.size > 0 %}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"class": "slideshow-section under-menu",
"settings": [
{
"type": "paragraph",
"content": "For best results, upload images that are around 1280px in width and under 600px in height. Try to keep your slideshow images the same size."
},
{
"type": "select",
"id": "slideshow_text_animation",
"label": "Text animation",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade In"
},
{
"value": "fadeInUp",
"label": "Fade Up"
},
{
"value": "fadeInDown",
"label": "Fade Down"
}
],
"default": "fadeInDown"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "select",
"id": "slideshow_speed",
"label": "Slideshow speed",
"default": "6000",
"options": [
{
"value": "0",
"label": "None"
},
{
"value": "4000",
"label": "4 seconds"
},
{
"value": "6000",
"label": "6 seconds"
},
{
"value": "10000",
"label": "10 seconds"
}
]
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px recommended"
},
{
"type": "richtext",
"id": "pretext",
"label": "Preheading",
"default": "
"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Your headline"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading",
"default": "
"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "checkbox",
"id": "caption_background",
"label": "Display text background"
},
{
"type": "checkbox",
"id": "caption_background_transparency",
"label": "Enable text background transparency"
},
{
"type": "text",
"id": "button1",
"label": "First button label"
},
{
"type": "url",
"id": "button1_link",
"label": "First button link URL"
},
{
"type": "checkbox",
"id": "button1_highlight",
"label": "Highlight first button"
},
{
"type": "text",
"id": "button2",
"label": "Second button label"
},
{
"type": "url",
"id": "button2_link",
"label": "Second button link URL"
},
{
"type": "checkbox",
"id": "button2_highlight",
"label": "Highlight second button"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
},
"blocks": [
{
"type": "image",
"settings": {
"image": "",
"title": "Turbo Shopify Theme",
"subtitle": "",
"text_align": "center"
}
},
{
"type": "image",
"settings": {
"image": "",
"title": "",
"subtitle": "",
"text_align": "center"
}
}
]
}]
}
{% endschema %}
The mobile screenshot you shared is my desired outcome.
@RichardL Can you kindly share your file “styles.scss” or “styles.css” with us so we can check it for you?
Please find the file in dropbox here :
Hi @RichardL
In the file “styles.scss.liquid”, you can follow these steps:
- First, search for the keyword “flickity-viewport”:
- Then, you add the following code to this field, it should look like this:
- Next, search for the keyword “.caption-content”
- Then, you change the field “.action_button” as shown below:
- Next, find the keyword “.caption”:
- You will change them like the image below:
Finally, save your code and check your site. We hope that it will work for you.
Thanks a lot, this is working now. Appreciate your support here.