Module Positions 1 2 and 3 not stacking on mobile

assetivity1

Module positions 1, 2 and 3 aren't displaying correctly on mobile. The Demo shows them stacking but they don't do this on my version?

aman204

assetivity1 Kindly check now. In reference with this tutorial , Have resized the specific blocks as shown in screenshot accordingly to show full-width in Layout --> Responsive layout --> Extra small

assetivity1

Thank you @aman204! They are now stacking on mobile, however the 'Upcoming Events' Module stays aligned Left and does not realign to fit the width as the News and Updates module does. Can this be fixed?

aman204

assetivity1 the 'Upcoming Events' Module stays aligned Left and does not realign to fit the width as the News and Updates module does

Try add this to custom.css file and adjust padding-left value accordingly :

@media only screen and (max-width: 480px) {.dt_event_location,.dt_event_date,.dt_event_title{padding-left:50% !important;}#dtevents .dtevent img{float:left !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

assetivity1

Thanks that worked - is there a way to make the image also resize?

teitbite

assetivity1 Hi. Please add this as well for better presence:

@media only screen and (max-width: 767px) {
#dtevents .dtevent img {
    max-width: 100%;
    margin: 0px 15px 0 0;
    float: left;
}
}

@media only screen and (max-width: 440px)
#dtevents .dtevent img {
    float: none !important;
}

.dt_event_location, .dt_event_date, .dt_event_title {
    padding-left: 0 !important;
}
}

assetivity1

Thank you. I would also like this to look the same format for both mobile and desktop? teitbite

aman204

assetivity1 I would also like this to look the same format for both mobile and desktop?

Try add this to custom.css file and adjust values accordingly in order to accomodate all elements in available space in horizontal mode :

@media only screen and (min-width: 768px) {#dtevents .dtevent img {width: 40%;float: left;}
.dt_event_location,.dt_event_date,.dt_event_title{padding-left:45% !important;}}