Button in custom section is not behaving as desired

Highlighted
Tourist
25 0 3

Hey!

 

I know this is not directly related to API, but I have been posting several places and I have not obtained the desired feedback. 

 

I am working on a page, where I needed two "hero" images to be horizontally aligned, and then a button with a link is supposed to be placed in the center of each image. Through cutom sections I have managed to create the horizontally aligned images and include a button-link as well.

 

Now the only problem is that in the customization bar, I am not allowed to assign different attributes to each button (I need the right button to point to a webshop-page and I need the left button to point to an "about" page.) Whenever I type something into "Button text" in the customization bar - i t is dulicated on to the other button as well, same goes to "link".

 

Also I need to style the button so that they remain centered in the images, regardless of if it is viewed on phone/tablet screen etc. Does anyone have any knowledge about the best way of doing this?

 

Thanks!

 

Here's my code

{% for block in section.blocks %}
{% case block.type %}
 {{ block.settings.content }}



 		{% when 'image' %}

      <div class="row">

        <div class="column">

         
            <img src="{{block.settings.image | img_url: 'master' }}"/>
          
          	<hr>
          	<div id="section-cta">
  			<h3> {{ section.settings.text-box }} </h3>
  			<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
			</div>
			<hr>
         

        </div>
      

        
        {% endcase %}
        {% endfor %}
     





{% schema %}
 {
	"name": "Two Hero Images",
	"settings": [
                                      {
                    "id": "text-box",
                    "type": "text",
                    "label": "Heading",
                    "default": "Title"
                  },
                  {
                    "id": "link",
                    "type": "url",
                    "label": "Button link"
                  },
                  {
                    "id": "linktext",
                    "type": "text",
                    "label": "Button text",
                    "default": "Click Here"
                  }
        			
				],

		"blocks":[
					{
						"type": "image",
						"name": "image block",
						"settings": [
									{
									"type":"image_picker",
									"label": "your image",
									"id": "image"
									}

						]
					}

					]

}
{% endschema %}Skærmbillede 2020-04-30 kl. 09.56.51.png
0 Likes