I want to change the height of the home nectar slider above 1800px screen width. I wrote a media query that worked. The next day it does not work and the code does not appear in chrome either.
I tried adding some additional selectors and removing the media query and this new code does not even appear in chrome either. If it is being over-written by js why wouldn\'t my code still appear in chrome but with a line through it?
I am having much difficulty getting Salient to recognize my media queries. Usually when I write a media query the code doesnt even appear in chrome. Is javascript over-writing my queries? How can I write effective media queries with Salient? Do I need to edit a js file?
Please give me the solution to the above slider height media query? And as much info as possible to help me writing media queries with Salient moving forward.
Please try using the Flexible Slider Height option in Nectar Slider.
Also when using the flexible slider height option you have to enter the slider height based on how big your images would be at 1600px width - this will ensure the scaling is perfect with no clipping. To find the correct height for your images use this: http://andrew.hedges.name/experiments/aspect_ratio/ . The default width for images is 1600px so for example a image that is 1904 x 738px would be converted to 1600 x 620px if scaled down. Therefore slider height would be set to 620 px .
The flexible slider height option makes the Nectar Slider respond perfectly to ensure there\'s no clipping on any view - leaving it off will cause the height of the slider to change only once per every viewport change (desktop, ipad, mobile) and clip variously between them.
Thanks
Thank you for this valuable info. I will make use of it in the near future. I believe the info you have provided is to display the slider images exactly as they are at all screen sizes with no clipping correct?
In this case however, at screen widths of 1800px and above, I was hoping to change the height to allow for image height clipping. It seems preferable to have taller images on smaller screen sizes and shorter images on large desktop screens, and my media query solved the problem but then stopped working. Is this possible?
I would love to learn detail code info, so I could get good at customizing the theme, and the manual provided is designed for non-coder beginners. Do you have a more detailed manual or Salient theme notes for engineers?
Can you provide the page url and the css you are trying to use so i can see why its not working . Also if you are placing the css in the Custom CSS box. Be sure that there is no red cross in it as that would cause the css to not get rendered on the front end.
I want to change the height of the home nectar slider above 1800px screen width. I wrote a media query that worked. The next day it does not work and the code does not appear in chrome either.
@media only screen and (min-width: 1800px) {
.swiper-slide.swiper-slide-visible.swiper-slide-active.no-transform {
height: 1050px !important;
}
}
I tried adding some additional selectors and removing the media query and this new code does not even appear in chrome either. If it is being over-written by js why wouldn\'t my code still appear in chrome but with a line through it?
#ajax-content-wrap .wpb_wrapper .swiper-slide.swiper-slide-visible.swiper-slide-active.no-transform {
height: 1100px !important;
}
I am having much difficulty getting Salient to recognize my media queries. Usually when I write a media query the code doesnt even appear in chrome. Is javascript over-writing my queries? How can I write effective media queries with Salient? Do I need to edit a js file?
Please give me the solution to the above slider height media query? And as much info as possible to help me writing media queries with Salient moving forward.
Thanks so much,
Mark
Hey!
Please try using the Flexible Slider Height option in Nectar Slider.
Also when using the flexible slider height option you have to enter the slider height based on how big your images would be at 1600px width - this will ensure the scaling is perfect with no clipping. To find the correct height for your images use this: http://andrew.hedges.name/experiments/aspect_ratio/ . The default width for images is 1600px so for example a image that is 1904 x 738px would be converted to 1600 x 620px if scaled down. Therefore slider height would be set to 620 px .
The flexible slider height option makes the Nectar Slider respond perfectly to ensure there\'s no clipping on any view - leaving it off will cause the height of the slider to change only once per every viewport change (desktop, ipad, mobile) and clip variously between them.
Thanks
ThemeNectar Support Team
Tahir,
Thank you for this valuable info. I will make use of it in the near future. I believe the info you have provided is to display the slider images exactly as they are at all screen sizes with no clipping correct?
In this case however, at screen widths of 1800px and above, I was hoping to change the height to allow for image height clipping. It seems preferable to have taller images on smaller screen sizes and shorter images on large desktop screens, and my media query solved the problem but then stopped working. Is this possible?
I would love to learn detail code info, so I could get good at customizing the theme, and the manual provided is designed for non-coder beginners. Do you have a more detailed manual or Salient theme notes for engineers?
Hey Again,
Can you provide the page url and the css you are trying to use so i can see why its not working . Also if you are placing the css in the Custom CSS box. Be sure that there is no red cross in it as that would cause the css to not get rendered on the front end.
Thanks
ThemeNectar Support Team