5 Useful CSS Tricks for Responsive Design

Hi Friends, Today I am sharing 5 CSS tricks which are commonly used in CSS. They are very simple CSS properties such as overflow, min-width, max-width, and relative value. But These
properties have played a very important role in responsive design.

Making a responsive design is very easy which is explained below.

1. Min & Max Width

Max-width property used for setting the maximum width of an element. It is used to keeping an element from extending the boundary.

Max-Width Container

In the below example, the container to display at width 800px if achieved, but it should not more than 85% of the boundary width.

.container {
width: 800px;
max-width: 95%;
}

Responsive Image

You can make the image auto resize to the max width of the boundary by using max-width:100% and

You can also make an image auto resize to the maximum width of the boundary by using height: auto and max-width:100%.

img {
height: auto;
max-width: 100%;
}

The above responsive image CSS works on IE7 and IE9 but doesn’t work on IE8. To fix it, add width: auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:

The above example of responsive image CSS works with IE7 and IE9 but does not work with IE8. You simply apply conditional CSS for only IE8 to fix the responsive image, use IE hack as mention in below.

@media 
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
screen { img { width: auto; /* for ie 8 */ } }

Min-Width

min-width sets the mini width of an element. It is opposite as max-width. within the example type below, min-width is employed on the input text field to forestall the input from obtaining terribly tiny once reducing.

2. Overflow:hidden Trick

As announced in my previous article, you’ll clear float with the overflow property. This trick is extraordinarily helpful. you’ll clear the float from the previous component and keep the content running at intervals the instrumentation by applying overflow: hidden.

3. Word-break

I conjointly talked concerning the word-wrap property before. you’ll force unbreaking text (eg. long address text) to wrap rather than running during a single line.

.break-word {
word-wrap: break-word;
}

4. Relative Values (demo)

In a responsive style, knowing once to use relative price will modify the CSS and maximize the most effective layout result. Below are some examples.
Relative Margin

Below is an associate example of a comment list wherever relative left margin is employed to house out the rib comments. rather than mistreatment fastened constituent price, I used share price to house out the sub-lists. As shown on the left facet of the screenshot, the content held in the sub-lists gets terribly tiny on mobile resolution if the constituent left margin was used.

Relative Font Size

With relative worth (eg. em or %), the font size, line-height, and margin spacing are often hereditary. as an example, I will amendment the font size on all descendant components by merely dynamical the font-size on the parent part.

Relative Padding

The screenshot below shows it’s higher to use relative share artifact as a critical fastened component artifact. The box on the left shows Associate in Nursing unbalanced artifact house if the component artifact was used. The box with share artifact on the proper shows that the content space is maximized.

5. Responsive Video (demo)

You will scan the main points here. It makes the video infix to expand fullwidth to the boundary.

.video {
height: 0;
overflow: hidden;
position: relative;
padding-bottom: 66.35%;
}

.video iframe,
.video object,
.video embed {
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
}

 

Leave a Reply