Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

Size of images on mobile is too small

This topic is resolved
Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Hi,

    Before the last theme update the images on mobile would align 1 by 1 underneath each other. Now they are being put next to each other. I prefer them to be below each other because then everything becomes clearer and people would not have to load a picture to see it more clear. Is this possible?

    Thx

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi René, 🙂

    To change this, simply add the following code snippet to your website:

    /**
    * Put Pictures in One Column on Mobile
    */
    @media (max-width: 576px) {
    	#buddypress .activity .rtmedia-list {
    		display: grid;
    		grid-template-columns: 1fr;
    	}
    	#site #buddypress:not(.youzer) #activity-stream.grimlock-buddypress-activity-list .activity-item .activity-inner .rtmedia-list-item{
    		min-width:100%;
    		width:100%;
    		display:block;
    		padding-right:0px !important;
    	}
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.

    If you want to go further with the customization of your website, we advise that you require customization work.

    Regards,

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Thx

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    The size of images on desktop is also too small btw. Can this be made larger?

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Using the current code creates a problem on mobile, see attached. These images are now put beneath each other. Is it possible for this part to be put horizontal?

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi René,

    Sorry, it seems I wasn’t defensive enough. I updated the snippet in my previous answer. 🙂

    Best,

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    No worries, thx.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    You’re welcome. 🙂

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Is it possible to make the size of a single image on desktop larger as well? This was larger before, now they have become very tiny.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi René,

    Are you still talking about the pictures next to the profile image? Don’t hesitate to share screenshots.

    In that case, it will require customization work.

    Best,

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    No, see attached. Normal uploaded images are really small on the activity page.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi René,

    To make the image bigger, simply add the following code snippet to your website:

    /**
    * Make the Images in Activity Stream Bigger
    */
    @media (min-width: 768px){
    	#buddypress .activity-content .rtmedia-list .rtmedia-list-item.media-type-photo{
    		width: 50% !important;
    		min-width: 50% !important;
    	}
    }

    You can let 50% as value or change to 100% to take the full width.

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.

    If you want to go further with the customization of your website, we advise that you require customization work.

    Regards,

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Thx. I’ve now tried 50% and 100%, but both don’t seem to be working. It’s still very tiny on desktop. Maybe desktop should be specified in the code?

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi René,

    Strange, this snippet works fine on our side. Perhaps a plugin interfere. Could you create a new website user for us please? If possible with administrator capabilities so we can investigate and edit this snippet to make it works on your website.
    You can post the user name and password in your next reply and mark it as private to keep this between us.

    Please note that this snippet only works for screens larger than 769px. Beyond this screen size, the screen is considered a desktop screen.

    Thank you.

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez
    This reply has been marked as private.
    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Hi Renné,

    Thank you. I just updated the snippet to make it stronger. 🙂

    Let me know if all is working fine now.

    Best,

    René Wappiez
    Participant
    • 106 Topics
    • 352 Posts
    @wappiez

    Perfect, it worked. Thx

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6297 Posts
    @themodactyl

    Glad to read that René. 🙂

    Best,

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Size of images on mobile is too small’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site