CSS
Evenly space div items across row using CSS
So at last 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 is the CSS #wrapper { text-align: justify; } #wrapper >…
Read MoreResizing 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 MoreCSS 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 MoreCSS 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 MoreWP Ecommerce Shop Styling Purchase Table in Email Template
Using the WP Ecommerce Shop Styling plugin. Email template product table is improved by adding the following styling to the email template: #products-table { width: 100%;} #products-table td {padding:5px;} #products-table th{text-align: left;}
Read MoreDisable 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 MoreOverride 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 MoreChrome 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 MoreCustom 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 MoreCSS 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