This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: ,

Hide social icons on smallest width

  • Creator
    Topic
  • #11775
    scottb23
    Participant

    So Im guessing that the theme switches between stylesheets depending on the width of the page or something similar?

    In effect, I’d like the social icons to be hidden when the site resizes down to one column (iphone style) but remain visible otherwise. I guess this might be a function or css I can drop in somewhere? As the functionality already exists with the optional hiding of elements to the same degree via the builder.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #11786
    Jason Bobich
    Keymaster

    Hello,

    The theme implements the standard practice of using @media queries to apply different styles at different viewport sizes. Here’s an example template you can use for your own child theme’s custom stylesheet:

    /* Desktops */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    /* Tablets */
    @media (max-width: 979px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile */
    @media (max-width: 767px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    So in this case, you’d want to use your inspector to find an selector that wraps the social icons, and then set its display property to “none”, but wrap it in the appropriate @media query.

    http://www.w3schools.com/cssref/pr_class_display.asp

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #11907
    scottb23
    Participant

    Thanks Jason! Got it working! For everyone interested, here is the code to paste into the child theme/whatever CSS stylesheet to turn off social icons when the theme is at iphone width.

    /*Turns off social icons on iPhone */
    @media (max-width: 767px) {
    	#branding .themeblvd-contact-bar li a {
    		display: none;
    	}
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.