How to hide my photos on mobile on sections

Highlighted
New Member
4 0 2

Hello anyone can help me to hide my Hero photo on mobile???
a
Here's my samplecode below
Website: https://strokes-test.myshopify.com/

 

{%- assign index = 1 -%}
<section class="heroCarousel {% if section.settings.banner_type == true %}disable-carousel{% endif %}">
  {% for block in section.blocks %}
    <div class="carousel-slide slide-{{index}} image-text">
      {% if block.settings.img != blank %}
        <div class="imageBx">
          <img src="{{ block.settings.img | img_url: 'master' }}">
          <img src="{{ block.settings.mobile | img_url: 'master' }}">
        </div>
      {% endif %}
      
      {% if block.settings.mobile != blank %}
        <div class="imageBx">

          <img src="{{ block.settings.mobile | img_url: 'master' }}">
        </div>
      {% endif %}
      
      {% if block.settings.title != blank %}
        <div class="image-content">
          <h2>{{ block.settings.title }}</h2>
        </div>
      {% endif %}
    </div>
    {%- assign index = index | plus: 1 -%}
  {% endfor %}
</section>



{% schema %}
  {
    "name": "Image Text",
    "settings": [
      {
        "label": "Title",
        "id": "title",
        "type": "text",
        "default": "Hero Carousel"
      },
      {
        "label": "Hide Controls?",
        "id": "banner_type",
        "type": "checkbox",
        "default": false
      }
    ],
    "blocks": [
    {
      "name":"block",
      "type":"image",
      "settings":[
        {
          "label":"Image",
          "type":"image_picker",
          "id":"img"
        },
        {
          "label":"Title",
          "type":"text",
          "id":"title"
        },
		{
			"type":"image_picker",
			"id":"mobile",
			"label":"Mobile Image"
		}
      ]
  }
    ],
"presets":[
	{
		"name":"Hero Carousel",
		"category":"New"
	}
]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

 

Highlighted

Hi @Carlvic22 

This is PageFly. I would love to provide the solution for your issue

Please add the code below

@media(max-width: 767px) {
	.heroCarousel {
		display: none!important;
	}
}

And follow the path:

Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

Hope my answer help you. If you find it helpful, just give it a like. Let me know if you need help.

PageFly.

PageFly - Advanced Shopify Page Builder.
- Use the Christmas template to skyrocket your sales.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
0 Likes