CSS

Evenly space div items across row using CSS

So this is a problem I am had for a while and now I have an answer to the question of how to evenly spread items such a divs across a row that is mobile responsive without using floats. Here is the HTML <div class=”wrapper”> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> <!– EOF wrapper–> and here…

Read More

Resizing Facebook Like Buttons Using CSS

The standard Facebook Like button is pretty small so you might want to enlarge it but there is no means to do so using the Facebook API to generate the button code. Instead this is achieved using CSS on the .fb-like class that Facebook adds to the standard “Like” button. It uses the Transform property…

Read More

CSS Attribute and Adjacent Sibling Selectors

Useful attribute selectors available in CSS3 for complete and partial matching of attribute values: This example uses the title attribute of the H1 tag: h1[title=”Home”] { color: blue; } /*Exact value “Home” in the title attribute */ h1[title~=”Home Back”] { color: red; } /* Attribute equals one of the list.*/ h1[title^=”Home”] {color: green; } /*Title…

Read More

CSS Display: table

To display a block of divs as a table use the following html and css: CSS #home-table { display: table; table-layout: fixed; width: 100%; word-wrap: normal; border-collapse:separate; border-spacing:10px 50px; } .home-row{ display: table-row; } .home-cell{ display: table-cell; } ¬†HTML <div id=”home-table”> <div class=”home-row”> <div class=”home-cell”> cell content here </div><!– home-cell –> <div class=”home-cell”> cell content…

Read More

Disable Chrome Minimum Font Size

Using CSS: /*styles for Chrome */ @media screen and (-webkit-min-device-pixel-ratio:0) { Body { -webkit-text-size-adjust:none; } } This can cause issues in that it disables zoom for font size but it does remove the issue of Chrome wrecking layouts by increasing font sizes etc

Read More

Override ie.css in TwentyTwelve for Child Theme

TwentyTwelve loads ie.css from functions.php so to override it in your child theme use the following in your themes functions.php // remove ie css from twentytwelve theme function mytheme_dequeue_styles() { wp_dequeue_style( ‘twentytwelve-ie’ ); } add_action( ‘wp_enqueue_scripts’, ‘mytheme_dequeue_styles’, 11 ); //add new from child theme wp_enqueue_style( ‘mytheme-ie’, get_stylesheet_directory_uri() . ‘/css/ie.css’, array( ‘twentytwelve-style’ ), ‘1.0’ ); $wp_styles->add_data(…

Read More

Chrome conditional CSS styles

Conditional styling for Chrome browser can be achieved by adding this to the style sheet: @media screen and (-webkit-min-device-pixel-ratio:0) { Body { font-size: 20px; } }

Read More

Custom Admin Styles

In THEME/functions.php add: // Custom WordPress Styles function admin_css() { wp_enqueue_style( ‘admin_css’, get_stylesheet_directory_uri() . ‘/admin.css’ ); } add_action(‘admin_print_styles’, ‘admin_css’ ); Add your custom admin styles to THEME/admin.css

Read More

CSS Styling for Mobile Devices Responsive Design

Include meta tag in head to tell mobile devices to use device width instead of assuming desktop width and scrolling: For iPhone: @media only screen and (min-device-width: 480px) { #background img { display: none; } } Other screen sizes can be targeted as follows: min-width: 320px // smartphones, portrait iPhone, portrait 480×320 phones (Android) min-width:…

Read More