5 extremely useful tricks when making Responsive Website

1. Responsive Video

The tjkdesign website has a detailed article about this trick, you can see here . This trick makes videos embedded in web pages wide open to both sides to close to two borders.

2. Min Widht and Max Width

Max Width Container

The max-width attribute allows us to set the maximum width of the element, which prevents the element from inserting out of the required range.

Responsive Image

We can make images on the web automatically adjust the size by the maximum width of the border by the following way:

Min Width

The min-width attribute sets the smallest width of the element. In the following example, we use min-width for the input field so that the input width is too small


3. Relative Values ​​(Relative Values)

When making Responsive website, if we know when to use relative value, it will minimize the CSS writing and display optimization of the website.

Relative Font Size

When we use em or% for font-size, line-height and margin distance will be inherited from parent element. For example, we can change the font size of the child elements by changing the font-size of parent element.


Join the Machine Learning event - Technology of the Future!
Join the Machine Learning event – Technology of the Future!

Relative Padding

The figure below shows that using a padding value in units of% instead of px is a more optimal way. The left durable element is not as balanced as the right element.


4. Overflow: hidden

We can eliminate the effect of the float element of the previous element by using the overflow: hidden declaration for the following content:


5. Word-break

In case the text on the web page is too long to break the layout, we can use the word-wrap attribute to remove this.


ITZone via Viblo

Share the news now