Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1298855

    Hey,
    please have a look at the URL in private field in screensizes between 480 und 767px.
    Watch the size of the header.
    Inspector says 20px but there is no rule in the CSS that says 20 – it says 14.
    Why is that and how can i fix that?

    Kind regards
    Chris

    Here is the actual CSS:

    
    /*Shop*/
    .product p.wc-gzd-additional-info {
    	display: none !important;
    }
    #top .onsale {
    	border-radius: 6px !important;
    	padding: 0 5px !important;
    }
    .products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
    	font-size: 1.5em !important;}
    .beschreibinliste {
    	font-size: 11px !important;
    	line-height: 13px !important;
    	margin: 0 0 36px 0!important;
    }
    .inner_product div {
    	line-height: 11px;
    	font-size: 11px;
    	color: #7B7B7B;}
    
    #top .avia_cart_buttons .button {
    	background-color: #2d5c88 !important;
    	color: #ffffff !important;}
    
    ul.products li strong {
    	display: inline !important;
    }
    
    /*ALLGEMEIN*/
    
    .weiterethemen{font-size: 17px !important;
    font-weight: bold !important;}
    #top .aviaccordion-preview-title h3 {
    	color: #fff !important;
    	font-size: 14px !important;}
    
    /*SLIDER*/
    .slidedescfirst {
    	/*Im ersten Slide auf startseite ist eine erste zeile die hervorgehoben werden soll*/
    	font-weight: bold !important;
    	font-size: 22px !important;
    	line-height: 1.5em !important;}
    .caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p {
      margin: 0 !important;}
    .avia_transform .av_slideshow_full .avia-caption-title {
    	color: #ffffff !important;}
    
    .responsive #top .slideshow_caption .avia-caption-content {
    	
    	text-align: left !important;
    	hyphens: auto !important;
    }
    
    .angebotslider .avia-caption-title {
    	font-size: 29px !important;}
    .angebotslider .avia-caption-content {
    	line-height: 1.3em;
    	font-size: 13px !important;
    	text-align: left !important;
    	hyphens: auto !important;}
    #zeitgestaltung .slideshow_caption {
    	width: 64%;}
    	
    /*##### SEITEN ######*/
    /*ANGEBOTE & CHILDPAGES*/
    .cc-child-pages-thumb {
      margin: 11px 15px 9px 13px !important;
      float: none;
      padding: 8px;
      background: #fff;
      border: 1px solid #efefef;
      border-radius: 5px;
      box-shadow: 3px 4px 3px #efefef;}
    .ccchildpages {
    	border: 1px solid #ccc;
    	border-radius: 5px;
    	box-shadow: 4px 4px 5px #cccccc;
    	background-repeat: repeat;}
    .ccchildpage h3 {
    	font-size:15px !important;}
    .ccchildpage {
    	background: #fafafa;
    	border: 1px solid #ccc;
    	border-radius: 5px;
    	box-shadow: 4px 4px 5px #cccccc;
    	min-height: 510px !important;
    	position:relative;}
    .ccpages_more a {
    	font-size: 100%;
    	border: 10px solid #c05f5f !important;
    	background: #c05f5f;
    	color: #ffffff !important;
    	font-weight: bold !important;
    	border-radius: 7px;
    	position: absolute;
    	bottom: 15px;}
    
    /* #Media Queries
    ================================================== */
    
    	/* kleiner als 990 (devices and browsers) */
    	@media only screen and (max-width: 989px) {
    		 #full_slider_1, 
      #full_slider_1 .av_slideshow_full.avia-slideshow,
      #full_slider_1  .avia-slideshow-inner,
      #full_slider_1 .avia-slideshow li,
      #full_slider_1 .avia-slideshow li img {
        min-height: 240px;}
      #full_slider_1 .avia-slideshow li img {
        width: 140% !important;
        max-width: auto;}
       .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
          padding-top: 0px;}
    .angebotslider .avia-caption-title {
    	font-size: 22px !important;}
    .angebotslider .avia-caption-content {
    	line-height: 1.25em;
    	font-size: 12px !important;}
    }
    
    	/* zwischen 768 und 990 Tablet Portrait (devices and browsers) */
    	@media only screen and (min-width: 768px) and (max-width: 989px) {
    .ccchildpage {
    	min-height: 450px !important;}	
    #zeitgestaltung .slideshow_caption {
    	width: 64%;}
    .angebotslider .avia-caption-title {
    	font-size: 18px !important;}
    .angebotslider .avia-caption-content {
    	line-height: 1.25em;
    	font-size: 12px !important;}
    
    }
    			
    
    	/* kleiner als 768 */
    	@media only screen and (max-width: 767px) {
    
    	 	}
    
    	/* zwischen 768 und 480 */
    	@media only screen and (min-width: 480px) and (max-width: 767px) {
    .ccchildpage {
    	min-height: 550px !important;}	
    .cc-child-pages-thumb {
      margin:11px 7px 9px 0px !important;
      padding: 5px;}
    		#startseite .av_slideshow_full .container.caption_container {
    	top: 0px !important;
    	height: 55% !important;}
    		.angebotslider .avia-caption-title {
    	font-size: 14px !important;}
    .angebotslider .avia-caption-content {
    	line-height: 1.15em;
    	font-size: 11px !important;}
    	}
    
    	/* zwischen 480 und 319 */
    	@media only screen and (min-width: 319px) and (max-width: 480px) {
    .ccchildpage {
    	min-height: 405px !important;}
    .cc-child-pages-thumb {
      margin: 11px 0px 9px 0px !important;
      padding: 5px;}
    
    .responsive #top .slideshow_caption .avia-caption-content {
    	text-align: left !important;
    	hyphens: auto !important;
    	font-size: 12px !important;
    	line-height: 1.2em !important;
    }
    .responsive #top .slideshow_caption h2 {
    	font-size: 16px !important;}
    #startseite .av_slideshow_full .container.caption_container {
    	top: 0px !important;
    	height: 55% !important;}
    		
    	}
    	
    	/* kleiner als 319 */
    	@media only screen and (max-width: 319px) {
    .ccchildpage {
    	min-height: 350px !important;}
    .cc-child-pages-thumb {
      margin: 11px 0px 9px 0px !important;
      padding: 5px;}
    		
    
    .responsive #top .slideshow_caption .avia-caption-content {
    	text-align: left !important;
    	hyphens: auto !important;
    	font-size: 11px !important;
    	line-height: 1.1em !important;
    }
    .responsive #top .slideshow_caption h2 {
    	font-size: 14px !important;
    }
    
    #1298912

    Hey,

    That is because your CSS is broken. Please use this website – http://csslint.net/ and fix it.

    Regards,
    Yigit

    #1298939

    OK, i see, i lost the ending “}” on line 202 and fixed it.
    But still the inspector says 20 where it should be 14.

    Chris

    #1299225

    Hi Chris,

    Thanks for the update. I’m not sure which element you are referring to, could you try to explain a bit further please?

    Best regards,
    Rikard

    #1300427

    Its ALL written in the very first post!

    Chris

    #1300477

    Hi,

    No, it is not. In your first post you are pointing us out to header, not slider heading.

    Find following code

    .angebotslider .avia-caption-title {
    	font-size: 14px !important;}

    and change it to following one

    .responsive #top .angebotslider .avia-caption-title {
    	font-size: 14px !important;}

    Regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Output not corresponding with CSS rules’ is closed to new replies.