I want the Image banner section on the front page to be displayed with a different picture on the mobile version, because the image height on the mobile page is way too short which i really don’t like even it’s already set to “large”. How can I do that?
Also, is it possible to change the text content position to bottom/top instead of just at the middle section?
Any help is greatly appreciated!
Hello @Jason10 I have checked your issue
can you please use mobile view and desktop view 2 different images
please check this
if any other help, please connect with us
Thanks for the reply. No I can only upload 1 picture for the image banner, so the picture on both desktop and mobile view are the same picture.
@Jason10 Can you please share your store URL?
Hey @Jason10
please try this code with dynamic options
{%- style -%}
@media screen and (min-width: 821px) {
{%if section.settings.about-image-main-mobile %}
.collection-banner-container {
background-image: url('{{ section.settings.about-image-main-2 | img_url: 'master' }}');
min-height: 400px;
height: 100%;
}
{% endif %}
}
@media screen and (max-width: 820px) {
{% if section.settings.about-image-main-mobile %}
.collection-banner-container {
background-image: url('{{ section.settings.about-image-main-mobile | img_url: 'master' }}');
min-height: 750px;
height: 100%;
background-position: bottom;
}
{% endif %}
}
{%- endstyle -%}
{% schema %}
{
"name": "Collection Banner",
"settings": [
{
"type": "image_picker",
"label": "Collection Banner Background Image Desktop",
"id": "about-image-main-2"
}, {
"type": "image_picker",
"label": "Collection Banner Background Image Mobile",
"id": "about-image-main-mobile"
}
]
}
{% endschema %}
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K
Thanks for the help! I’m sorry may I ask what is dynamic options? I’m not sure where should I paste the code to 
@Jason10 , Dynamic options allow you to change your image using theme options, similar to the image.
Hi @Jason10,
Firstly, please provide a screenshot and the page URL showing where you want to display different images for mobile and desktop. This will help me to provide you with the appropriate code and file name and assist you better.
Thank you
K.K
got it @Jason10 can you please send this banner file code also
thanks
K.K
Sure, where can I find the banner file code? Thanks
hey @Jason10 is it possible to add me as a staff on kaushik@huptechweb.com this mail i’ll add the code and then provide a small video on how to add images using theme options
Sorry my Basic Shopify plan doesn’t come with a staff account function
@Jason10 if you don’t know how to add staff members please follow this Steps:
I’ll send the collaborator request please check and accept
Request accepted. Thank you!
Hey @Jason10, the changes have been made from my end. I will send a Google Meet invitation to explain how to add the second image and all the other details. Please check your store email.
