Mobile responsive image bar on alternate page template

[JKP84]

Hello - i've created a new page template and added 2 image bar elements to it.

I am struggling to get the images within them to fit properly - they are banners, and they won't fit right on desktop and are not responsive on mobile or ipad. I have attempted to fix this but cannot get them working properly on both.

can anyone assist me please? it is the top 2 banners on this page (after the menu section)

https://www.dinkyartist.com/pages/fundraising 

[oscprofessional]

@JKP84 ,

@media only screen and (max-width: 768px){
.image-bar__item.image-bar__item--3a0d4e5f-3944-47a0-b78e-d45e8dc50af8.box.ratio-container.lazyloaded {
    background-size: 100%;
}
.image-bar__item.image-bar__item--56bc8672-216c-40cf-a2e8-68ff1acf730f.box.ratio-container.lazyloaded {
    background-size: 100%;
}
.image-bar{
    max-width: 100%;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[JKP84]

@oscprofessional Thanks for your suggestion - it hasn't really worked, on mobile view it now has a huge area of white space above and below. and the top banner is still partly cut off in height on desktop view?

[oscprofessional]

@JKP84 ,

@media only screen and (max-width: 768px){ .image-bar__item.image-bar__item--3a0d4e5f-3944-47a0-b78e-d45e8dc50af8.box.ratio-container.lazyloaded { background-size: 100%; } .image-bar__item.image-bar__item--56bc8672-216c-40cf-a2e8-68ff1acf730f.box.ratio-container.lazyloaded { background-size: 100%; } .image-bar{ max-width: 100%; }.image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
height: auto;}div#shopify-section-alternate2 {padding: 0;}div#shopify-section-image-bar2 {
padding-bottom: 0;} }

Please the code with this code.

[JKP84]

@oscprofessional i'm afraid it is still cutting off part of the height on desktop and not working correctly on mobile. I'd like the banners to be above one and another, there is too much space.

[oscprofessional]

@JKP84 ,

Check the video attached