Mobile optimizitation: Change Upcoming Events on homepage from list to diashow

Site URL: https://www.spandovia.de

https://imgur.com/hxy5GAY

Hello everyone,

Is it possible, to change the events portrayal on the homepage to a diashow? On a desktop it looks fine since its listed next to one another. However, on my mobile device its listed downwards and takes up a lot of space/scrolls to reach the end. I'd prefer it to be displayed "smaller" so the events can fit next to each other or make it a diashow (like a gallery) where u can click on an arrow to swap to next event. 

Thanks for any help.

Greetings

You mean 4 events under this text?

Bevorstehende Veranstaltungen

On 10/17/2022 at 9:34 AM, tuanphan said:

You mean 4 events under this text?

Bevorstehende Veranstaltungen

Yes, or less i.e. just 2, so it doesnt become too small to read. 
Or make it a diashow (like a gallery, where u can click on an arrow to go to next)

Cheers!

On 10/18/2022 at 8:38 PM, Phex said:

Yes, or less i.e. just 2, so it doesnt become too small to read. 
Or make it a diashow (like a gallery, where u can click on an arrow to go to next)

Cheers!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item {
    width: calc(~"50% - 10px") !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    margin-bottom: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
}

On 10/23/2022 at 3:08 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item {
    width: calc(~"50% - 10px") !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    margin-bottom: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
}

 

It looks way better this way, however, theres a lot of empty space that needs to be scrolled down until you reach the end of the site. Is that somehow fixable?

Thanks a lot.

On 10/31/2022 at 7:23 PM, Phex said:

It looks way better this way, however, theres a lot of empty space that needs to be scrolled down until you reach the end of the site. Is that somehow fixable?

Thanks a lot.

Use this new code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item {
    width: calc(~"50% - 10px") !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    margin-bottom: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item-list {
    height: auto !important;
}
}

On 11/4/2022 at 2:26 PM, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item {
    width: calc(~"50% - 10px") !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    margin-bottom: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
}
div#block-yui_3_17_2_1_1665509487905_5174 .summary-item-list {
    height: auto !important;
}
}

 

Thank you so much tuan! Its perfect

Is it possible to change the block size of the very first picture on the homescreen for Mobile/Desktop? On Desktop its full size, however, on mobile its zoomed in.

If I change the block size on mobile version it looks good for mobile, however, it changes it for desktop, too, which is not what i want.

Cheers!

On 11/17/2022 at 4:23 PM, Phex said:

Thank you so much tuan! Its perfect

 

Is it possible to change the block size of the very first picture on the homescreen for Mobile/Desktop? On Desktop its full size, however, on mobile its zoomed in.

If I change the block size on mobile version it looks good for mobile, however, it changes it for desktop, too, which is not what i want.

Cheers!

Change this?

On 11/21/2022 at 1:39 PM, tuanphan said:

Change this?

I was talking about the main page.

While on a desktop it looks like this: https://prnt.sc/_xs-yB-jFsuX
on mobile version the picture is cut off and looks like this: https://prnt.sc/ppuyGtgaH6KE