Hey!

Try adding this code to the Quick CSS:

@media only screen and (max-width: 687px) {
    #top #wrap_all .main_color h1{
        font-size: 32px;
    }
    .phone-info .av_font_icon {
       margin: 0 7px !important;
    }
}

Cheers! 
Josue

Hi!

1. Try this for the font color and size.

.main-title, .main-title a { font-size: 20px !important; color: blue !important; }

2. I’m not really sure what your trying to display there. Are you trying to have a filter where the blog posts are displayed depending on which category you click? Go ahead and send us a link to your page and take a screenshot highlighting what your trying to do.

Best regards,
Elliott

Hey!

That text is already bold, use this code in Quick CSS to increase its size:

.phone-info span {
    font-size: 14px;
}

Regards,
Josue

Hi!

You can use convert he current filter buttons to icons, add this to Quick CSS:

/* Styling */
.inner_sort_button:after{
    font-family: 'entypo-fontello';
    font-size: 24px
}
.inner_sort_button span {
    display: none;
}
#js_sort_items .text-sep{
    display: none !important;
}
#js_sort_items a{
    padding: 0 10px;
}

/* Icon codes for each icon (note the classes) */
.all_sort_button .inner_sort_button:after{
    content: "\e822";
}
.branding_sort_button .inner_sort_button:after{
    content: "\e824";
}
.interactive-design_sort_button .inner_sort_button:after{
    content: "\e826";
}
.photography_sort_button .inner_sort_button:after{
    content: "\e827";
}
.print-design_sort_button .inner_sort_button:after{
    content: "\e828";
}
.web-design_sort_button .inner_sort_button:after{
    content: "\e839";
}

P.S.
To find out the codes for each Icon: create a Page and add any icon-based element, when you’re about to select the icon to use, place the mouse over for some seconds, a tooltip with the icon code will show.

Regards,
Josue

Hi!

Can you copy and paste the exact errors your getting?

1. For the viewport issue we include that meta tag on line 35 in the header.php file.

if( strpos($responsive, 'responsive') !== false ) echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';

2. See here, https://developers.google.com/speed/docs/insights/UseLegibleFontSizes. You’ll probably need to change the CSS around quite a bit to satisfy Google. Honestly they are being kind of anal about this so I wouldn’t care about it too much as long as your satisfied with how it looks on your device. You cannot always trust online testing tools, it’s a program and programs have bugs.

3. Touch elements too close – this is the same thing. It’s way too vague of a description to figure out what to do. You could spend a couple of days playing around with your margins to try and satisfy Google. If it really matters then you’ll want to hire a Google mobile expert for this.

4. Content not sized to viewport – This is probably referring to our shopping cart dropdown which we use CSS to hide on the ride side of the page. Google probably thinks this is causing a horizontal scroll bar but we have overflow set to hidden so it displays nicely for mobile users. If you want to remove the shopping cart dropdown then we can try that.

Regards,
Elliott

• This reply was modified 11 years, 1 month ago by Elliott.

Hi!

You need to the put this code somewhere in your Quick CSS or child theme style.css (i noted JS code there, remove it):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

Also make sure to have set this in the mc4wp Form options.

Best regards,
Josue

Hi NicRW!

It looks like the sizes are being changed by a plugin.

If you want to use some CSS then drag a codeblock element to that page and add this inside.

<style type = "text/css">
.avia_textblock { font-size: 12px !important; }
</style>

Cheers!
Elliott