Support ForumSpecify image size in desktop and mobile – Support Forum https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/feed/ Thu, 02 May 2024 04:27:12 +0200 http://bbpress.org/?v=2.5.12-6148 en-US https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8329 <![CDATA[Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8329 Tue, 19 May 2015 10:14:39 +0000 tberin Hi,

When I create a slidable object as slider to be used on a page, the images on the desktop appear fine with the proportions I would like, in this case 16:5 (images cut to this size in advance).
How can I specify another proportion for the images when showing on mobile without stretching them. What im looking to achieve is, set the image proportion to 16:11 and cut the remaining pieces on the sides. This way I can have a bigger image on mobile.

Thanks!

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8352 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8352 Wed, 20 May 2015 07:42:15 +0000 IshYoBoy Hey,

Unfortunately this needs to be handled with custom CSS only. What comes to my mind is a media query which will target mobile screens and in it you can set each slide to have “overflow: hidden” if it does not have it already. Then set the width of the image inside every slide to 200% or more and give it a negative “margin-left: -50%”. This would have the desired effect.

To apply the styles to one slider only, you might need to add a Custom CSS Class to the slider page element using the “Advanced Global Attributes” in its settings and use it to target the styles to it only.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8358 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8358 Wed, 20 May 2015 08:38:48 +0000 tberin I found another solution to this:
I simply set an image background to the slider column with cover and 100VH (via custom CSS, could be nice to have this as a built in feature). This way i can have a full screen mobile effect and still have a background image where i can put stuff over it with the visual builder. By the way, the full height row option has no effect on mobile devices so I applied this workaround.

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8390 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8390 Thu, 21 May 2015 06:39:36 +0000 IshYoBoy Hey,

Could you, please, share the link of the final result so we can check?

Thanks

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8391 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8391 Thu, 21 May 2015 06:52:46 +0000 tberin Sure,

On the slide background, once the main row is configured as full width + full height, on mobile the feature is not working. The missing attributes are (I used them in the slider build in with VC):

min-height: 100vh; background-color: transparent; background-image: url(/wp-content/uploads/2015/01/name_of_file.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center;

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8410 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8410 Fri, 22 May 2015 08:38:07 +0000 IshYoBoy Hey,

Thanks for sharing. We cannot confirm this will be added as it seems to cover just one special scenario but there are many more possibilities how users might want to have it to work.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8412 <![CDATA[Reply To: Specify image size in desktop and mobile]]> https://support.ishyoboy.com/forums/topic/specify-image-size-in-desktop-and-mobile/#post-8412 Fri, 22 May 2015 10:55:50 +0000 tberin Hmm.. When you set the VC block to be full height it doesn’t work on mobile. This “fixes” it :)
Of course in addition to its additional uses.

]]>