CSS Target Class that Starts or Ends With Value

Target unknown/incomplete CSS class. CSS Target Class that Starts with Value CSS [attribute^=value] Selector Example Sets a margin on all <p> elements that have a parent <div> class attribute value that starts with “starts” e.g. ‘.starts-content’ CSS Target Class that Ends With value CSS [attribute$=value] Selector Example Sets a margin on all <p> elements that have a parent <div> class …

CSS Vertical Align Div with CSS Table and Flexbox

A straightforward approach with CSS Table This approach has been around for ages, but is still rarely used over absolute div positioning. We simply add CSS table to the parent div and table-cell to the child div to be centred:- We’ve added tp optional elements here as other rules such as a left float may scupper the layout. CSS Flexbox Method Recently …

Div 100% of Remaining Content Browser Window

If you want your div to fill 100% of the remaining content / traverse the rest of the browser window width then simply apply the following CSS to the Div:- If the div is nested inside a parent then ensure that the parent has a position ‘relative’ and also that it’s overflow is se to ‘visible.

Pagelines DMS Full Width Section

Pagelines DMS is a great Framework for building awesome WordPress sites on, but it isn’t perfect (just yet anyway). It is however extensible and if for example you want a module/area of your site to do something you can simply create a custom section (see Pagelines Docs on creating a Section). We’ve already created a few for our own specific …

CSS for Mobile and Other Devices

We’re all for responsive design techniques and also how sites display accross diefrent mobile devices and standard devices. Rather than adding scripts we’ve found the best way to target Devices is directly through CSS. Target Mobile Devices and Other Standard Devices with CSS This list is the most comprehensive and will cover most mobile devices. Just add the CSS directly …

Image with Background Image CSS

I just wanted to share a very quick tip with you that I’ve recently used and was surprised to see worked cross-browser. I suppose I shouldn’t have been too surprised as it uses valid CSS markup, but anyhow. I wanted to give an existing image a background image and usually I would put the image in a ‘div’ or ‘li’ …