Frontpage modules on mobile phone

andrewwinkler

I would like all blocks/modules (slideshow, video gallery etc) to be displayed in full monitor width on mobile devices. Right now, they are bleeding over the right screen border (slideshow) or have a width of only one third of the screen size.

aman204

andrewwinkler Hi

Try add this to custom.css file :

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {.ja-slidewrap .ja-slide-right{width:100% !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

andrewwinkler

Now the slideshow no longer bleeds beyond the right screen border, which is great. However, all modules, except the google map at the bottom are being displayed only on the left third of the screen. How can we make them display at full width?

andrewwinkler

They are all in top-1 position on the frontpage.

aman204

andrewwinkler However, all modules, except the google map at the bottom are being displayed only on the left third of the screen. How can we make them display at full width?

You may check now after clearing your browser cache if changes dont reflect. Have added some further css rule-sets for media query suggested earlier

andrewwinkler

Wonderful. Thank you so much. Now the only thing left is the toolbar and menu block. Basically, instead of the JomSocial icons, I would like the site logo plus the login and register button to be displayed on the mobile screen frontpage.

andrewwinkler

I just discovered another problem. The logos in the "Our Partners" module are too small. Instead of decreasing the logo size to make all partner logos fit, it probably would be better to make the overflow scrollable.

aman204

andrewwinkler The logos in the "Our Partners" module are too small. Instead of decreasing the logo size to make all partner logos

Having reviewed the same in realtime on Vivo nex, The logos from specific module appear fine for me. Ref:

Try to check in realtime on standard responsive devices as responsive emulator can be deceiving at times and may not show the actual output. Also, You may try to clear your browser cache

andrewwinkler

What's weird is that the logos are now look fine on the mobile device but are no longer displaying horizontally aligned on the desktop.

Update: I've found why the "Our Partners" logos suddenly look alright on the mobile phone but no longer on the desktop. The reason is that I had accidentally disabled the code in the custom.css that is responsible for the horizontal display on the desktop.

/* style carousel "our partners"
#uber-cliens-136 .owl-carousel {display:flex;flex-shrink: row wrap;}
#uber-cliens-136 .client-item {margin-top: 24px !important; margin-right:16px !important;margin-left:16px !important; margin-bottom: -72px;}

After changing changing the code to distinguish between different display width, the partner logos now look alright on both platforms. Thanks again. I've learned a lot from you guys.

/* style carousel "our partners" */
@media(min-width:469px) {
	#uber-cliens-136 .owl-carousel {display:flex;flex-shrink: row wrap;}
	#uber-cliens-136 .client-item {margin-top: 24px !important; margin-right:16px !important;margin-left:16px !important; margin-bottom: -72px;}
}

@media(max-width:468px) {
	#uber-cliens-136 .client-item {margin-top: 24px !important; margin-right:16px !important;margin-left:16px !important; margin-bottom: 24px;}
}

In other words, the only problem remaining is with the header block. See screenshot above. Basically, what I need to achieve is

a) in row 1, to display the logo, login button and register button instead of the various JomSocial icons,
b) in row 2, to have #EEEEEE as the background colour to make the text "Main Menu", next to the icon, better visible.

aman204

andrewwinkler a) in row 1, to display the logo, login button and register button instead of the various JomSocial icons,

This relates to custom work and putting in dedicated hours alongwith requiring to do several customizations and code tweaking/additions to get the results as envisaged in responsive mobile mode so would suggest to kindly hire developer or agency for the same as the template settings in default stage enables to see the modules in such stack order as apparently seen in responsive mobile mode

b) in row 2, to have #EEEEEE as the background colour to make the text "Main Menu", next to the icon, better visible.

Try add this to custom.css file and change color code accordingly :

@media screen and (min-device-width: 320px) and (max-device-width: 480px){.off-canvas-toggle span{color: #000 !important;}}

andrewwinkler

Thank you so much. I've learned a lot from you guys. Your top quality support is the main reason for me to keep renewing my develop licenses. Hopefully, I won't need to pester you much longer thanks to how much I am learning from you. Thanks again.

aman204

andrewwinkler Thank you so much for your kind words and your support. It means so much for the JA team and keeps us motivated in bringing even more enriched products for our members and try to go the extra mile in order to provide exemplary support 🙂

Kindly let us know if all queries to relative topic have been resolved so as to mark the thread as resolved or need further assistance on the same

andrewwinkler

Above mentioned issues are all sorted to my knowledge. Thanks again.