
-
AuthorPosts
-
October 26, 2017 at 8:27 am #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!
October 28, 2017 at 5:32 pm #869978Hey 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;}}
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;}}
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,
MikeNovember 2, 2017 at 12:34 am #871464Mike,
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?
November 2, 2017 at 3:50 am #871500Hi,
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 ShannonNovember 2, 2017 at 11:28 pm #871877Thanks 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?
November 3, 2017 at 3:50 am #871913Hi,
Add the following to quick css:
.avia-testimonial-meta-mini a{ color:white!important; }
Best regards,
Jordan ShannonNovember 8, 2017 at 11:52 pm #874348Perfect! Thank you for your assistance!
November 9, 2017 at 6:40 am #874441Hi,
No problem. If you nee additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.