-
Posts
-
Hello again!
First, please have a look at the private link below using a desktop browser. You’ll see that we’re using a transparent header and a fullwidth slider with an image of a spiral staircase. Also, In the fullwidth slider settings, we’ve specified a title and a caption of a couple sentences. Everything looks fine on the desktop version.
Now, open the same link on a mobile phone (portrait or landscape mode). You’ll see we still have a transparent header and the fullwidth slider image of the spiral staircase, but since the full image is only 480px wide, the fullwidth slider area doesn’t have enough vertical room for the transparent header plus the fullwidth title and caption information, so it just pushes it all together, which doesn’t look great.
For mobile and tablet devices, we need to make sure that background image has a minimum height that allows for the transparent menu, title, and caption to show up without overlapping each other. How can we do this?
Thank you.
Hey Brad,
To add custom height to the slider please enable custom css class name support as mentioned here http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.custom-height { min-height:360px!important; }Best regards,
VinayHi Vinay,
That seems to get close, but doesn’t quite solve the issue. I’ve included a link to a screenshot of the page on mobile after the suggested changes have been implemented. You’ll see that the min-height has added height to the fullwidth slider area, but the background image hasn’t filled that area. (Compare the screenshot to the second link showing the page on desktop.)
I would think a lot of people would use fullwidth sliders in a similar way and therefore would encounter this same problem, so finding a solution might be really appreciated by hundreds or thousands of Enfold users.
Thanks in advance for your continued help!
Hi!
The images in the slider resize proportionally to the width of the browser. Setting a custom height to the slider will also stretch the images inside. Please check the screen shot below.
An alternate solution is to add a css class name to the caption in it’s description and hide then in the mobile.
example :
<p class="only_desktop"> some text </p>Add the below css in Quick CSS
/*Show only in mobile or desktop*/ @media only screen and (min-width: 769px) { .only_mobile { display: none !important; }} @media only screen and (max-width: 768px) { .only_desktop { display: none !important; }}Regards,
VinayHi Vinay,
.custom-height { min-height:360px!important; }I used this slightly different version:
.custom-height img { height:360px!important; }…and was able to cause the image to disproportionately expand, which is OK for the time being, though ideally the image would retain its original proportions and the extra on the left and the right would just bleed off the edge of the screen. You can see the latest version by clicking the first link below and comparing the differences in background image proportions on desktop vs mobile (portrait).
Without including the IMG, the fullwidth slider height does expand, but the image doesn’t fill that space—it’s just whitespace, as I demonstrated in the previous reply (and the screenshot attached to that previous reply showing that, since the image is 16:9 but a mobile browser in portrait mode is closer to 9:16, the image takes the width of the browser window as its own width and therefore renders a proportional height that’s too small to cover much height in the window, so while adding the min-height gives the slider area more space, it doesn’t expand the image into that space. Targeting the image with IMG on the other hand, does expand the image, but stretches the image and breaks the original proportion.)
An ideal solution would take the focus area of a fullwidth slider image (as chosen by dropdown, e.g., center center or top left, etc.) and use that area of the image as the background image of the slider for browsers in portrait mode. I’ve attached a graphic (second link below) showing what our current solution accomplishes vs what an ideal solution would accomplish.
Perhaps suggest this to the dev team for consideration in future updates of the theme?
Thanks again for your continued assistance!
Hi,
To fix the aspect ratio of the image, specify its minimum width then adjust its position with a negative margin. Something like this:
@media only screen and (max-width: 767px) { .slider-fix img { height: 360px!important; min-width: 600px; margin-left: -20% !important; } }Best regards,
IsmaelHi Ismael,
Adding the min-width really helps the “look” a lot. Thanks!
(Can’t add a negative margin though or the image is pulled off the screen if they turn their phone from portrait to landscape.)
Cheers—
- You must be logged in to reply to this topic.