CTA - Coding

Highlighted
Excursionist
28 1 3

Hello,
i did a simple code which does give an image for mobile and desktop depending on the width of the screen i still want to add buttons but im not succeding

 

This is my style 

.mobile-image{
display: block;
  top:5px
}
.mobile-image img {
  width: 100%;
  height: auto;
}
.mobile-image .btn3:hover {
  background-color: black;
}
.desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
  top:5px
}

.mobile-image img {
  width: 100%;
  height: auto;
}

.mobile-image .btn3:hover {
  background-color: black;
}
.desktop-image{
display: block;
}
.desktop-image img {
  width: 100%;
  height: auto;
}

}

 

html

<div class="image-container">
<div class="mobile-image">
<img srcset="https://cdn.shopify.com/s/files/1/0450/9578/0513/files/iphonebh.jpg?v=1596994528">
  </div>
<div class="desktop-image">
<img srcset="https://cdn.shopify.com/s/files/1/0450/9578/0513/files/newbgtry._eaca2b83-088f-4176-837f-dd0fc8201199.jpg?v=1596990870">

</div>
</div>

 

 

the function is working as you can see on desktop & mobile image is different i succeeded in doing that but the button i`m tired already trying i would appreciate if somebody helps
Thank you

this is my website www.luxnd.com

Untitled-2.jpg

0 Likes
Highlighted

Hi @VisualEarPick ,

Can you please check your theme customise option for this section, it might be already provided CTA button option, if option not exist then you need to contact theme developer or hire shopify developer for add custom for add CTA button requirement.

Thanks,
Jay

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact us regarding any help, below our contact listed:
Shopify Expert Page: https://experts.shopify.com/brisk-developers
Email: support@briskdevelopers.com
Contact us: https://www.briskdevelopers.com/contact-us
Skype: briskdevelopers
0 Likes
Highlighted
Shopify Partner
72 12 34

Wheres the CTA <button> html to display what / where you want ?????

 

Also consider that every device, regardless if its a mobile or desktop or ipad is loading BOTH desktop and mobile images then deciding which to display. Why load images that are not to be used ?

 

Maybe not the best approach.

Dan from GC Web Team | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Website: GCWebteam.com
0 Likes
Highlighted
Excursionist
28 1 3

@BriskDevelopers Hello, im using debutify theme, i elemenated that section and did write that simple code just to make two different images for desktop & mobile
i still have the old original section of that theme 

0 Likes
Highlighted
Excursionist
28 1 3

@GCWebTeam hello, i want the button for example to display in the middle,

and i know it loads both images. i have no other choice to have an equivalent experience for desktop & mobile version.

its the only approach i could`ve came up with 

 

i tried also adding a settings which can allow me to add an image for mobile in the customization of the slideshow from the theme but i didnt know how to code it for example :

This is the default section for the slideshow image

      <!-- Blocks -->
      {% for block in section.blocks %}
        <div class="hero hero-{{ block.id }}
                    hero--{{ section.settings.section_height }}
                    hero-mobile-{{ section.settings.section_height_mobile }}
                    overlay
                    lazyload
                    hero-parallax
                    {% unless forloop.first == true %}lazypreload{% endunless %}
                    {% if hero_slick %}hero__slide slide--{{ block.id }}{% endif %}"
             {% if block.settings.image %}
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.image_position }}; background-image: url('{{ block.settings.image | img_url: 'medium' }});"
             {% endif %}
             {{ block.shopify_attributes }}>

          {% if block.settings.image == blank %}
            <div class="placeholder-background">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {% endif %}
          <div class="hero__inner">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>
          </div>

          {% unless block.settings.overlay %}
            <style>
              .hero-{{ block.id }}.overlay:after{
                background-color: transparent;
              }
            </style>
          {% endunless %}
        </div>
      {% endfor %}
    </div>

 

 and i did add this mobile_image for the settings of the slideshow section but i didnt know how to procceed writing the exact code for it i would be happy if you gave me a solution 

"blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },		  
			{
            "type": "image_picker",
            "id": "mobile_image",
            "label": "Image Mobile"
          },

 

0 Likes
Highlighted
Tourist
11 2 0

I see you haven't figured it out yet. I'm using debutify too, I'm trying to crack it. I'll report back if I find a solution. Debutify is weird in the sense that the image is a style parameter of the <div> which is the slide, and not an <img> tag, or else we would have had it done by now

0 Likes