Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1255355

    Hello
    I’ve looked at lots of posts and tried everything but I could only get the mobile to work. Here’s my mobile code (break point is max 989).

    	/* MOBILE - WORKS */
    	
    	/* sliders - titles and captions *************************************/
    
    	.caption_bottom .slideshow_caption .slideshow_inner_caption {
    	    margin-bottom: 20px; /* tight for images on white as well */
    	}
    	/* adjust vertical position of caption */
    
    	.av_slideshow_full .container.caption_container {
    		margin: 0px 0px 0px 20px !important;	
    	}
    	
    	/* slider titles - default is h2 but using h3 styling */
    
    	.avia_transform .av_slideshow_full .avia-caption-title {
    		/* font-family: 'Roboto', sans-serif; */
    		font-family: 'Noto Sans JP', sans-serif;
    		font-style: normal;
    		font-weight: 400;	
    		font-size: 16px;
    		line-height: 20px;
    		letter-spacing: 1px;
    		color: #575757 !important;
    		text-transform: uppercase;		
    		text-shadow: 0px 0px 0px #000 !important;
    		margin: 0px 0px 5px 0px !important;		
    	}
    
    	/* slider descriptions - h4 */
    	
    	.caption_bottom .slideshow_caption .avia-caption-content p {
    		/* font-family: 'Roboto', sans-serif; */
    		font-family: 'Noto Sans JP', sans-serif;
    		font-style: normal;
    		font-weight: 500;	
    		font-size: 14px;
    		line-height: 18px;
    		letter-spacing: 1px;
    		color: $575757 !important;
    		text-transform: uppercase;		
    		text-shadow: none !important;
    		margin: 0px 0px 0px 0px !important;			
    	}
    	
    	/* applied class of topSliderMobileWhite to the fw slider */
    	
    	.responsive #top .topSliderMobileWhite .slideshow_caption h2 {
    		color: #999 !important;
    	}
    
    	.responsive #top .topSliderMobileWhite .slideshow_caption .avia-caption-content,
    	.responsive #top .topSliderMobileWhite .slideshow_caption .avia-caption-content p {
    		color: #999 !important;
    	}
    

    This working example is on the contact page –

    https://pemcorpackaging.com/contact/

    For desktop, I applied a class of topSliderWhite to the fw slider, but it’s not picking up the changes. Here’s the code I tried.

    This test is on the Solutions page –

    https://pemcorpackaging.com/solutions/

    /* DESKTOP - NOT WORING */
    
    /* all titles unless overridden below - same styling as h1 but with shadow */
    
    .avia_transform .av_slideshow_full .avia-caption-title {
    	/* font-family: 'Roboto', sans-serif; */
    	font-family: 'Noto Sans JP', sans-serif;
    	font-style: normal;
    	font-weight: 400;	
    	font-size: 24px;
    	line-height: 28px;
    	letter-spacing: 1px;
    	color: #fff;
    	text-transform: uppercase;		
    	text-shadow: 2px 2px 4px #000;
    	margin: 0px 0px 0px 0px !important;		
    }
    
    /* on white version - apply .topSliderWhite to fs slider - not working */
    
    .topSliderWhite .avia-caption-title {
    	color: #ff0066 !important;	
    	text-shadow: none !important;			
    }
    
    /* all descriptions unless overridden below - same as h2 */
    
    .avia-caption-content p {
    	/* font-family: 'Roboto', sans-serif; */
    	font-family: 'Noto Sans JP', sans-serif;
    	font-style: normal;
    	font-weight: 400;	
    	font-size: 18px;
    	line-height: 24px;
    	letter-spacing: 1px;
    	color: #fff;
    	text-transform: uppercase;	
    	/* background: black; */	
    	text-shadow: 2px 2px 4px #000;
    	margin: 10px 0px 0px 0px !important;			
    }
    
    /* on white version - apply .topSliderWhite to fs slider - can't get any of these to work properly */
    
    .topSliderWhite .avia-caption-content,
    .topSliderWhite .avia-caption-content p {
    	color: #ff0000 !important;	
    	text-shadow: none !important;
    }
    
    .caption_bottom .slideshow_caption .topSliderWhite .avia-caption-content,
    .caption_bottom .slideshow_caption .topSliderWhite .avia-caption-content p {
    			
    }
    
    /* this changes the background but not the text */
    
    .topSliderWhite .avia-caption-content,
    .topSliderWhite .avia-caption-content p  {
    	margin-bottom: -80px; /* tweak to offset height of controls and make v spacing for page h1 the same */
    	text-align: left;
    	background: orange !important;
    	color: green !important;
    }
    
    .avia_transform .av_slideshow_full .active-slide .topSliderWhite .avia-caption-content,
    .avia_transform .av_fullscreen .active-slide .topSliderWhite .avia-caption-content {
    
    }
    

    Am I missing something really obvious? Thank you!

    #1256548

    Hey webWahine,

    Thank you for the inquiry.

    Have you tried using css media queries instead of targeting the element using a unique class name, or instead of using multiple sliders?

    // https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    It might not be working because the css code for both mobile and desktop has the important rule and the code that is intended for mobile view might be overriding the other because the selector that is used is more specific. Please take note of the css selector specificity.

    // https://www.w3schools.com/css/css_specificity.asp

    Best regards,
    Ismael

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.