I am having 2 problems with the nectar slider on this site
a) when the site is viewed on mobile it is displaying a large grey panel top and bottom of the slider
b) on mobile view I have set the font sizes for the title and caption but I would like to also edit the lineheight as its too big for the small screens
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
line-height: 34px !important;
}
}
@media only screen and (max-width: 999px) {
.nectar-slider-wrap .swiper-slide[data-y-pos="middle"] .content {
width:100%!important;
top:60% !important;
}
}
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) {
#nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content p, #boxed .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content p, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="true"] .swiper-slide .content p, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="boxed-full-width"] .swiper-slide .content p, body .full-width-content .vc_span12 .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content p {
line-height: 24px!important;
}
#nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2, #boxed .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="true"] .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="boxed-full-width"] .swiper-slide .content h2, body .full-width-content .vc_span12 .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2 {
line-height: 24px!important;
}
}
I am having 2 problems with the nectar slider on this site
a) when the site is viewed on mobile it is displaying a large grey panel top and bottom of the slider
b) on mobile view I have set the font sizes for the title and caption but I would like to also edit the lineheight as its too big for the small screens
I managed to remove the dark background.... but the huge padding on the top of the vc rows for certain screenwidths
.vc_row.top_padding_phone_40pct {
padding-top: 40% !important;
}
HMMM I think I fixed the padding... now if you could just tell me the correct CSS to edit the lineheights for the nectar slider h2 and caption
to clarify the lineheights for the slider title and caption for smaller screensizes esp for mobile views
Hi Jen,
Please try this css:
.swiper-slide .content h2 { line-height: 96px; } #featured article .post-title h2 span, .swiper-slide .content p, body .vc_text_separator div { line-height: 60px; }Thanks.
that will affect the lineheights on the slides at full size.... I ONLY need to reduce the lineheights at mobile and tablet view.
here is in full screen ize
Hi There,
Please try this css:
@media only screen and (max-width: 690px){ #nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2, #boxed .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="true"] .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="boxed-full-width"] .swiper-slide .content h2, body .full-width-content .vc_span12 .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2 { line-height: 29px!important; }} @media only screen and (max-width: 690px){ .wpb_wrapper h1.vc_custom_heading { line-height: 25.8px!important; } }Thanks
Another question on thi same site.
https://become.com.au/posts/
I would like to NOT link to the posts for the quotations posts. they an remain only on the overview posts page
How can I take away the links?
Thanks Judith. It doesn't seem to be working.
I added it to the main CSS but also on page nd even tried massively reducing the height but I a not seeing any change
Actually it has.. it has affected the h2 thats below the slider... but not the h2 in the slider :(
so I removed the second section as I on't have to change the custom heading. But this CSS is not helping the slider
I have tried this but still its not doing anything
@media only screen and (max-width: 690px){
#nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
font-size: 24px !important;
line-height: 24px !important;
}}
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 { line-height: 34px !important; } } @media only screen and (max-width: 999px) { .nectar-slider-wrap .swiper-slide[data-y-pos="middle"] .content { width:100%!important; top:60% !important; } }Thanks
ThemeNectar Support Team
Thanks Tahir
Those sliders definitely look better now..
I tried adjusting the line height so that the lines are "tighter" but it doesn't seem to have any effect.
I wold also really like to tighten the lineheight in the caption text as well
I currently have all this in there but nothing is happening to the lineheights
@media only screen and (max-width: 690px) {
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
line-height: 20px !important;
}
}
@media only screen and (max-width: 999px) {
.nectar-slider-wrap .swiper-slide[data-y-pos="middle"] .content {
width:100%!important;
top:60% !important;
}
}
@media only screen and (max-width: 690px){
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2{
font-size: 24px !important;
line-height: 20px !important;
}
}
@media only screen and (max-width: 690px){
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content p{
font-size: 16px !important;
line-height: 14px !important;
}
}
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { #nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content p, #boxed .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content p, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="true"] .swiper-slide .content p, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="boxed-full-width"] .swiper-slide .content p, body .full-width-content .vc_span12 .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content p { line-height: 24px!important; } #nectar-slider-instance-1.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2, #boxed .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="true"] .swiper-slide .content h2, body .nectar-slider-wrap#nectar-slider-instance-1[data-full-width="boxed-full-width"] .swiper-slide .content h2, body .full-width-content .vc_span12 .nectar-slider-wrap#nectar-slider-instance-1 .swiper-slide .content h2 { line-height: 24px!important; } }Thanks
ThemeNectar Support Team