GraphicToronto

we love this plugin at graphictoronto.com but we do think it needs some support for mobile browsers!

i think the best and easiest method for create favicons(better than any plugin), that will work across all platforms and devices(mac, windows, mobile devices etc) is to use this awesome online resource, our designers at https://graphictoronto.com use this site for all of our web design projects, it’s simple, fast and free!

First create your favicon file, 280×280 pixels, save it as a .png or .jpg then go to the web address listed below and follow the instructions!

Go to: https://realfavicongenerator.net/

reply to this post if you need further assistance!

no worries! i generally set my mobile theme to respond at 480px, if you set it any larger you’ll risk not showing the side offer tab on other devices such as smaller tablets. anyways, glad it worked for you!

you need to place the css into the sideoffer.php file thats located in /wp-content/plugins/sideoffer on your wordpress installation. you’ll then scroll down to where it says SideOffer CSS paste the code you have above just before the line “</styles>”, see below…

/*** SideOffer CSS ***/
// Enqueue CSS
add_action(‘wp_head’,’hd_sideoffer_css’,100);
function hd_sideoffer_css() {
?>
<!– SideOffer [HD] CSS –>
<style type=”text/css”>
#sideoffer {
background: url(‘<?php echo get_option(‘hd_sideoffer_bg’); ?>’) top left no-repeat;
width:<?php echo get_option(‘hd_sideoffer_width’); ?>px;
height:<?php echo get_option(‘hd_sideoffer_height’); ?>px;
position:fixed;
top:<?php echo get_option(‘hd_sideoffer_top’); ?>px;
<?php echo “right”; //get_option(‘hd_sideoffer_side’); ?>: <?php echo get_option(‘hd_sideoffer_in’); ?>px;
text-transform: none;
z-index:99999;
}
#sideoffer .box { position: absolute; right:0; width: 78%; padding: 15px 10px; color: <?php echo get_option(‘hd_sideoffer_color_text’); ?>; }
#sideoffer p { margin-bottom: 5px !important; }

<!– THIS IS WHAT YOU NEED TO ADD –>
@media screen and (max-width: 480px) {
#sideoffer {display: none;}
}

thanks for your reply. I worked this out earlier today, it was just a jetpack mobile theme that was messing it all up, once i turned that off i saw all my changes. Thanks!

sorry folks, it was actually just that Jetpack’s mobile theme component was activated, causing a different stylesheet to take precedence over any css in the child theme style.css file.

hey, i noticed you managed to create you own custom mobile theme using a twenty thirteen child theme, please help me! i can’t work out how to change mine at all (graphictoronto.com) on browsers i have my customised theme, but on mobile it turns into the default blue menu bar, twenty thirteen mobile site.

I have tried creating my own @media rules, and scoured the functions.php but i just can’t see what im missing! please help!

i also took a look at your halcyon design, very nice e-commerce design there bud. one problem i noticed was the iframe in the location widget at the bottom, on resizing it overlaps the widget next to it. you should add a margin to that frame to prevent this. so something like this

.the-widget iframe {
margin: 0 20px;
}

or

.the-widget iframe {
padding: 0 20px;
}

just a suggestion, keep up the good work!

try changing the max-width to 500px, 280 is pretty small even for a mobile device. PS. you don’t have to use a mobile device to test this out, you can just re-size your browser window to smaller than 500px width.

hey nelsonq,

you need to place the css into the sideoffer.php file thats located in /wp-content/plugins/sideoffer on your wordpress installation. you’ll then scroll down to where it says CSS styles or something like that and paste the code you have above just before the line “</styles>”

hope this helps.