I am using impulse theme but have had a developer create custom sections for collection pages. One of those sections is giving me some trouble. I have on image on the left and 2 images (one over another) on the left. When the screen size grows the image on the right is being cropped and I have no way to control the fact that it is cropping the heads off the models. I have other sections that have layout focus section but although I am fairly knowledgable as a non-developer, I am unsure how to get that image to have the options to hold the focus onto certain areas. I have pasted the section code below and highlighted the specific section containing the image at hand in RED text. Can anyone advise a solution? I don’t mind the crop if it will just keep focus at the top center of the image.
}
.section–{{section.id}} .collection_all_img-2{
width: 50%;
float: left;
}
.section–{{section.id}} .collections_images_2{
height: 400px;
/* margin-bottom: 10px; */
}
@media only screen and (max-width:768px){
.section–{{section.id}} .collection_all_img-1{
width:100%;
height: 400px;
/* margin-bottom: 10px; */
margin-right: 0px;
}
.section–{{section.id}} .collection_all_img-2{
width:100%;
}
.section–{{section.id}} .collection_imgs{
padding-bottom: 50px;
}
.section–{{section.id}} .collection_imgs{
height: 1170px;
}
}
}
@media only screen and (min-width:769px){
.section–{{section.id}} .collection_all_img-1{
width:63%;
}
}
{% schema %}
{
“name”: “Tempo-images”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”
},
{
“type”:“url”,
“id”:“image_1_link”,
“label”:“Image link”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image”
},
{
“type”:“url”,
“id”:“image_2_link”,
“label”:“Image link”
},
{
“type”: “image_picker”,
“id”: “image_3”,
“label”: “Image”
},
{
“type”:“url”,
“id”:“image_3_link”,
“label”:“Image link”
}
]
}
{% endschema %}
