-
Posts
-
Good evening, on my website, I have almost all horizontal images that look very good on the desktop version, but unfortunately, they appear small and unattractive on smartphones.
Is it possible to publish vertical photos only for devices like smartphones?
Thank you,
TizianoHi Tiziano,
Yes, it’s possible, can you give us the link so we can check it? and try to give you some CSS codes to fix it.
You can post the link in private content.Best regards,
NikkoHi Nikko,
I didn’t understand what I need to do because I’m not a programmer. What are CSS?
Thank you.
By the way : not your Question – i know but
this is something i miss on default too:
the image sizes generated by enfold are all ( some are squared) in landscape format.
At least one image format should be created in portrait mode, e.g. for team members. Of course, the aspect ratios required for landscape shots are not suitable for such portrait shots. Here, 3:4 or 4:5 would probably be common formats.you can do that by a snippet inside child-theme functions.php:
add_image_size( 'news_size', 175, 260, false ); add_image_size( 'portrait', 900, 1200, false ); add_image_size( 'portrait_small', 450, 600, array( 'center', 'top' ) ); // this is with crop : true and crop properties function my_custom_sizes( $sizes ) { return array_merge( $sizes, array( 'news_size' => __( 'News Size' ), 'portrait' => __( 'Portrait' ), 'portrait_small' => __( 'Portrait small' ), )); } add_filter( 'image_size_names_choose', 'my_custom_sizes' );but: this only works on uploadiing images. If you like to recalculate the existing images – use a recalculation plugin ( force regenerate Thumbnails etc.)
Hello,
I have two photos to publish, a rectangular desktop photo and a vertical smartphone photo.
Is there an easier way to upload the two images?
Thank you
Hi dablec,
Yes, there’s an easy way for that (I’m assuming you’re using gallery or masonry gallery).
Basically you’ll have two image galleries, one for mobile and one for all other devices like desktop.
The first gallery for all other devices (horizontal gallery), edit it and go to Advanced > Responsive > Element Visibility (here’s a screenshot)
Check only Hide on very small screens (smaller than 479px – eg: Smartphone Portrait)Then on the second gallery (gallery for mobile), edit it as well and go to Advanced > Responsive > Element Visibility and check all options except Hide on very small screens (smaller than 479px – eg: Smartphone Portrait)
Hope this helps.
Best regards,
NikkoHello Nikko,
The horizontal photo isn’t displaying on the smartphone, and that’s fine up to this point. However, the vertical photo is loading and it’s okay, but I can only see half of it.
If I rotate the phone, I can see both photos, and this isn’t good.
I’m using the “easy slider” media.
Here is the page address: https://dablec.it/consolle-ingresso-linee-eleganti
Thank you,
TizianoI double-checked the vertical photo on the phone, and I can see the entire photo. However, if I scroll the image downward without moving anything else, the photo is only partially visible.
This is a significant issue because I’ve encountered it on all the pages of my website. There are many areas that don’t update automatically, and I believe this is a problem on your end.
Updating text, images, or any other module requires scrolling the page downward.
Hi,
As I understand your issue, on mobile in portrait mode you are seeing this instead of the full image:
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 450px) and (orientation: portrait) { #full_slider_2 .avia-slideshow-inner { height: 100vh !important; } }After applying the css, please clear your browser cache and check.
This is the expected results:
It looks like landscape is fine:
Best regards,
MikeGood morning, thank you for resolving my issue. Now, vertical photos seem to work perfectly.
There is another display issue; I have to scroll to the bottom of the page to view the images.
I’ll provide an example:
- You must be logged in to reply to this topic.