-
Posts
-
Hello There,
I am using a Fullwidth Easy Slider and I want to manage the size and position of the texts.
I already did something. (I am proud as a total css and html and wp beginner. ;-) thanks to the input i found in this forum)https://kuhl-consult.josk-design.de/5977-2/
(password in private content)It’s not that bad, but it’s not responsive. I am working o a laptop and a big screen and on the big screen the fonts are too small, and the position is not ok.
Is there a way to say via css that the font should be bigger on big screens and smaller on small screens and the position should be relative like 10% from top and 10% from left for example?this is the css I’ve put in quick css:
/*—————————————-
// CSS – fullwidth font style
//————————————–*//* fullwidth slider title */
.av_slideshow_full .avia-caption-title {
font-size: 40px !important;
line-height: 170% !important;
font-weight: 300 !important;
color: #663515 !important;
}/* fullwidth slider caption content */
.av_slideshow_full .avia-caption-content p {
font-size: 30px;
line-height: 150%;
font-weight: 200;
color: #000000 !important;
}/* fullwidth slider caption content */
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content
{
width: 100%;
margin: 0 auto;}
.avia_transform .av_slideshow_full .avia-caption-title {
width: 100%;
margin: 0 auto;
position: relative;}
@media only screen and (min-width: 768px) and (max-width: 1920px){
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content
{
width: 100%;
margin: 0 auto;}
.avia_transform .av_slideshow_full .avia-caption-title {
width: 100%;
margin: 0 auto;}
}.slideshow_caption {
z-index: 100;
width: 65%;
position: absolut;
bottom: 0;
top: -15.0em;
left: -5.2em;
height: 100%;
display: block;
text-decoration: none;
padding: -100%;
}Would be so great if you could help me. :)
Best regards
JosephineHi Josephine,
I’m not sure exactly what you are looking to change and on which screen sizes, but you can add CSS for different screen sizes by using media queries:
@media only screen and (min-width: 768px) and (max-width: 1024px) { Your CSS for tablet sized screens goes here }The media queries can be adjusted to your needs.
Best regards,
RikardHi,
I have a question along the same lines. I need the caption title and content margins a bit different.
I’m using “left without frame” position for the caption title and content.
I found another thread that had a code to put in quick CSS and I modified it for left margin like so:
.avia_transform .av_slideshow_full .avia-caption-title { margin-left: 20px!important; }That worked fine for the left margin. But when I tried to use “margin-right” in there it didn’t work for the right margin and I think I may want to alter the top margin as well.
To make matters worse, lol, I might need to change the caption title and content position on 1 of the slides to be different than the other 3.
SECOND thing I’d like to resolve, but may not be necessary – how can I have a colored link button, but no fill – as in the light transparent button – only a color outline instead of white? This outline color might also change on various slides.
If any of this is possible, and you have the time to address it, I’d be so grateful.
If I need to start a new thread I’m happy to do that.
Thanks!!
Hi,
Adding a right margin to the caption title should work but you won’t see any difference because there is nothing beside the title. If there is another text beside the title, applying a right margin will push the text away from the title.
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title { margin-right: 100px; }Why do you need to place a right and left margin to the title? If you want to pull the title to the right a bit, just apply the left margin.
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title { margin-left: 100px; }Or apply a negative right margin to it.
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title { margin-right: -100px; }To apply custom styles to different slides, we can use the nth-child selector.
#top #wrap_all .avia-slideshow .avia-slideshow-slide:nth-child(1) .av-slideshow-caption .avia-caption-title { margin-left: 100px; } #top #wrap_all .avia-slideshow .avia-slideshow-slide:nth-child(2) .av-slideshow-caption .avia-caption-title { margin-left: 150px; }The css code above will apply a 100px left margin to the caption title of the first slide and 150px to the second slider. If you want to adjust the style of the third slide, just add another css and adjust nth-child selector.
#top #wrap_all .avia-slideshow .avia-slideshow-slide:nth-child(3) .av-slideshow-caption .avia-caption-title { margin-left: 200px; }Best regards,
IsmaelThanks so much!! The reason I was wanting a right margin was because I needed the words to wrap down to the next line and I forgot how to say that.
So what about adjusting the whole kit and kabootle (both captions) up a little higher than it is already? I’m using “left without frame” position for the caption title and content.
And I forgot about this one!! I need to change where the button is too. I need the single button to be centered based on the caption width. Is that even possible?
Or the button align right instead of left.
Thank you!!! You’re awesome!!
Hi,
Thank you for the update.
Can you provide a screenshot of the layout that you have in mind or a mockup of the changes that you would like to do with the slider? You can use imgur or dropbox for the screenshot.
To align the button to the right, please use this css code.
#top #wrap_all .avia-slideshow-button { float: right; }Best regards,
IsmaelThank you SO much for your help! Here’s what the client wants. The first one the button is supposed to centered like the rest under the caption.
https://www.dropbox.com/sh/ljfi17505b3ge94/AACNtpo39AATHCdZiqNFb5Dla?dl=0
I need the buttons and all to look like these if at all possible.
Hi,
Please try this to center the buttons:@media only screen and (min-width: 1224px) { #full_slider_1 .avia-slideshow-button { -ms-transform: translateX(75%); transform: translateX(75%) } }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi Intell,
Thanks for the update. Please let us know if you should need any further help on the topic.
Best regards,
RikardHello!!
Every one of the codes like this that I added, tried them all, it only effects the “caption title”
Can somebody look at it for me?
.`#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
margin-left: 100px;
}`Hi,
Try this CSS instead:
.av-slideshow-caption .avia-caption-title, .avia-caption-content p { margin-left: 100px; }Best regards,
RikardThank you so much!!
I forgot one thing I need help with. With all the help I’ve received, maybe it got lost.
On slide 3 on the home page, I need a blue button with no fill and blue font – just for this3rd slider on this one page – Home Page top slider.
And for some reason, when I put the other code in for the left margin for caption – now the caption title and caption are animated on the slide. I had that turned off, but can’t get it turned off again.
Any ideas? Ty!!!
`.
Hi,
Please try this CSS as well:
.home #full_slider_1 li.slide-3 .avia-slideshow-button { border: 2px solid blue; color: blue; }Best regards,
RikardYa’ll are so awesome. Hey I was trying to get more of a margin/padding to the left and right of the word in the button on the slider, but there is no setting in advance settings to adjust that. There isn’t enough space on the left and right. How would I get more space on either side of the word(s) in the button?
I don’t know what I did but my breadcrumb area, slider and header & logo area are all shrunk and totally messed up!!
I don’t know what went crazy. Gosh, so sorry to bother ya’ll. Thank you so much!!
Hi,
If you want to change the padding of the button, then please try this instead:
.home #full_slider_1 li.slide-3 .avia-slideshow-button { border: 2px solid blue; color: blue; padding: 15px 30px; }Best regards,
RikardHi,
What did you do before the problem happened? Try to trace your steps backwards, then remove the CSS you added.
Best regards,
RikardHi! I did take all of them out. I have no idea. It’s the child theme only. If I enable the main theme it’s okay.
Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Fullwidth Easy Slider position of caption-content and caption-title responsive’ is closed to new replies.