Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #869134

    I just have 2 quick questions

    1. How can I make the grid row break into mobile version instead of side by side at 1024px?
    2. How do i adjust the font size at 1024px inside the large testimonial slider?

    here is a quick screencast http://screencast-o-matic.com/watch/cb6O1ZIRMM

    thanks!

    #869978

    Hey 4ROI,
    #2: To change the font size of the testimony slider you will want to target:

    .avia-testimonial_inner p {font-size: (your-size)px !important; }}

    so for between 768 & 1024:

    @media only screen and (min-width: 767px) and (max-width: 1024px) {#top .avia-testimonial_inner p {font-size: 12px !important;}}

    2017-10-28_111639
    but it doesn’t address the width of the element unless you add:

    @media only screen and (min-width: 767px) and (max-width: 1024px) {#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {padding: 0px 50px!important;}}

    2017-10-28_112356
    is that what you had in mind?
    #1 Try this code, it is set for 1025, so it will work on 1024 but you may want to set it higher like 1100. Test and adjust to suit.

    @media only screen and (max-width: 1025px) {
    	
      .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
      .responsive #top { overflow-x: hidden; }
      .responsive .boxed#top, .responsive #top.boxed .stretch_full , 
      .responsive.html_boxed.html_header_sticky #header,
      .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
      
      .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left:0;
        padding-right:0;
        float:none;
      }
      .responsive .units, .responsive .unit {
        margin: 0;
      }
      
      .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
      }
      
      .responsive #top #wrap_all .av-flex-cells .no_margin{
    	  display: block;
    	  margin: 0;
    	  height:auto !important;
    	  overflow: hidden;
    	  padding-left:8% !important;
    	  padding-right:8% !important;
      }
      
      .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
    	    width: 100%;
    		max-width: 100%;
    		margin: 0 auto;  
      }
      
      .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
    	  padding-left:0% !important;
    	  padding-right:0% !important;
      }
      
      .responsive #top #wrap_all .flex_column:empty{margin:0;}
    }

    Best regards,
    Mike

    #871464

    Mike,
    Thank you so much. This worked great. The only issue now is that the arrows overlap the text in some views. You can see that in the screenshot you posted https://postimg.org/image/6yxf12i25/

    How do I prevent the arrows from overlapping the text?

    #871500

    Hi,

    Add the following to quick css:

    @media only screen and (max-width: 1024px)  {
    
    #top .avia-slideshow-arrows a{
    margin:-60px -50px 0!important
    }
    
    }

    Best regards,
    Jordan Shannon

    #871877

    Thanks Jordan! That worked. One last question if you don’t mind.

    What do I target to change the font color of the Website Link that apears next to the person’s name?

    #871913

    Hi,

    Add the following to quick css:

    .avia-testimonial-meta-mini a{
    color:white!important;
    }

    Best regards,
    Jordan Shannon

    #874348

    Perfect! Thank you for your assistance!

    #874441

    Hi,

    No problem. If you nee additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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