stylesheet – My Brain BLOG

Height of CSS block containing floats

How to give that block the correct height? Read here.
How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible.

The answer is this: In order for a parent to wrap around children elements which are floated, a new block formatting context needs to be set on the parent. This can be done with:

.wrap {
    display: flow-root;
}

.wrap {
    contain: layout;
}

The latter is a bit newer. Either of these have an advantage over overflow: auto; because they have the explicit purpose of creating a new block formatting context, while overflow: auto works as a side effect. Interestingly, flow-root can be also used alongside block or inline for better layout control. For example:

.wrap {
    display: inline flow-root;
}

That’s all folks!
Have a nice day…

OceanWP v4.0 loses Google Fonts

Check this! All my OceanWP websites lost their default font and fell back to something Roman, so everything looked ugly! Basically all websites using OceanWP did no longer load their Google fonts after the update to version 4.0.

Solution: I had to manually enable the fonts again! How?
Go to WP Dashboard > Appearance > Customizer > Typography > Google Font Settings and enable Google Fonts – hit “publish” and done!

Looks like someone at OceanWP forgot to check backwards compatibility…

Have a nice day!

Break-inside: avoid

Remember… (see source)
When using the following in CSS:

   break-inside: avoid;

also add to the same item:

   overflow: hidden;

Otherwise Firefox will give you a headache.
Have a nice day 🙂

CSS Stylesheet selectors

Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.

Rock Rocks!

Cool rockhand!

a {
   cursor: url(/hand.cur),url(/hand.png),auto;
   color: #000;
   text-decoration: underline;
   outline: 0;
   -webkit-tap-highlight-color: rgba(180,0,25,.5);
}

See the links at large.nl

iOS fixed layers and scrolling

If it does not scroll as expected on iOS, try:

height: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;

That’s all! Continue reading iOS fixed layers and scrolling