In creating responsive web sites, we sometimes want to put a photo at the top of the page, but still ensure that the user sees important text below the photo at first glance. Otherwise, the user might not know that there is important information he should scroll to. We can use flex boxes and viewport […]
Category: CSS
Making a Google map fit in a container
As a developer, adding a Google Map to a responsive page can be difficult because both the minimum width and minimum height have to be specified to make the map display. The best solution is to use “vw” units. 10vw will resolve to 10% of the current viewport width. For example : .themap {min-height: 120vw;min-width: […]
Bootstrap 4.3.1 supports automatically responsive font sizes
Responsive font sizes made easier Responsive web pages will reorganize themselves to account for smaller screens. However, unless the text size is also managed, you could end up with words that split in the wrong places and a disastrous page layout for smaller screens. Bootstrap 4.3.1 now automates the process of making the font size […]
Customizing Bootstrap 4
How to override variables in Bootstrap 4. If you are moving from Bootstrap 3 to Bootstrap 4, you may suddenly have trouble defining your theme colors. This is because Bootstrap 3 traditionally used LESS and Bootstrap 4 now defaults to SASS. Variables in SASS vs. LESS Like LESS, SASS is a superset of CSS, in […]
Styling a Read More link with Less
Less is more for CSS, Efficient CSS with Pre-Processors Bootstrap 3 users generally know that Less is a CSS pre-processor that extends CSS allowing you to use variables and functions. But many people are reluctant to write their own Less code. Even if you don’t use Bootstrap, you can still use a pre-processor to allow […]