-
Posts
-
Hello!
I am having some difficulty adjusting full-width easy slider caption location and font size on one page of a site.
I used the following to adjust the location on desktop views because they cover the person’s face, no problem:.page-id-330 .slideshow_align_caption {
top: 160px;
}I am also able to adjust it so that on small mobile screens it shows up where it should with this:
@media only screen and (max-width: 1200px) {
.page-id-330 .slideshow_align_caption {
top: 0px !important;
}
}But the font size is a little too big on the small screen (so the bottom cuts off), and the captions are centered top-to-bottom on tablet views, so they cover the person’s face again. I have tried to do a separate media selector for smaller screen sizes vs tablet sizes but it doesn’t seem to be working. :(
Can you help me reduce the font size on small screens a little bit so it fits on the screen in portrait views, and move them down a little bit on tablet screens so they don’t cover the person’s face?
Many thanks in advance for your help!
Hey Julie,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
/* Fullscreen slider height in portable devices*/ @media only screen and (max-width: 775px) { #full_slider_1 li{ min-height: 155px !important; } #full_slider_1 li img{ min-width:175vw }}Best regards,
VinayHey Vinay,
Thanks for this, but I want to move the captions, not change the image height– if I change the image height, it will look stretched since these are all @ 72dpi (I learned this the hard way).
Is there a way to move the captions and change the font size only on this one page and only on mobile views? This is going to be a recurring issue for this client, so if I can get the right selectors, it will save me (and you) a lot of time.
I need to reduce caption font size on a per-page basis and move either the center caption or the left caption (depending on which is used) for tablets.
On this page, I adjusted the caption location on desktop views with this:
.page-id-350 .slideshow_align_caption {
top: 120px;
}I adjusted on mobile views to at least get the caption visible with this, and it’s fine on small mobile screens (on those, there is no avoiding covering the image, but I would like to be able to reduce the font size in case the caption runs long):
@media only screen and (max-width: 1200px) {
.page-id-350 .slideshow_align_caption {
top: 0px !important;
}
}ON OTHER PAGES (which have a different size slider and use the bottom caption), I got help from you and was able to move the captions with this:
.caption_bottom .slideshow_caption {
top: 425px !important; left: 350px !important;
bottom: auto !important;
}and I used this to shift it on a variety of mobile screen sizes (I split the breakpoints into 4):
@media only screen and (min-width: 320px) and (max-width: 399px) {
.caption_bottom .slideshow_caption {
top: 160px !important; left: 10px !important;
bottom: auto !important;
}
}I also was able to adjust the caption font size on the other pages with this:
@media only screen and (max-width: 480px) {
.responsive #top .slideshow_caption h2 {
font-size: 16px !important;
}
}and this:
@media only screen and (max-width: 359px) {
.responsive #top .slideshow_caption h2 {
font-size: 13px !important;
}
}The pages I am asking about now are all separate and have to be customized on a per-page basis, and they will use either the center or left caption because the bottom caption is customized for the featured large image size and I don’t want to mess with those settings.
I really appreciate your help– I have tried every combination of the above I thought would work and it’s not doing what I thought.
Hi,
There is no easy way to do what you are trying to achieve you probably need to hire a freelancer as it will take a lot of time for this customisation.
The code we provided earlier will look like the below screenshot.
Please feel free to let us know if you have any questions.
Best regards,
VinayHey Vinay,
I tried the snippet you provided– sorry, I was in a rush before and thought you were giving me something else, my bad.
This is a cool trick I did not know, great to be able to get the image to be taller on narrow tablet views, and at least now part of her face is showing so it looks a little better– thank you!
It doesn’t help though with the captions covering the face in wide tablet view, though. Any suggestions for that?
Thanks so much for your help
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 1200px){ .page-id-330 .slideshow_align_caption { top: 40% !important; }}Best regards,
VinayHi,
I adjusted to 45% and the tablet views look as good now as they can be– thanks so much!
The last issue now is that on smaller mobile screens, only the title shows (the caption is being cut off at the bottom).
It looked ok to me when the caption was centered top-to-bottom on small screens– even though the face was covered on the left, since half her face was showing on the right, it was ok.
How to set that up for smaller screens/cell phones?
- You must be logged in to reply to this topic.