Full Width Containers in Limited Width Parents

Working in a project for my client. She want to make a container full width
Although the visual composer has the option (Stretch row) but not working. then i found a solution on CSS Tricks its on of the most favorite site for me. cause i found issues solution from here.
Solved the issue with 2 line of css by using calc & vw and it works in IE9+

.full-width-row {
    margin-left: calc(-100vw / 2 + 500px / 2);
    margin-right: calc(-100vw / 2 + 500px / 2);
}

For Better result we should crate an id or class for the container. my case i have assigned .full-width-row class.

Here is the Result:

Before:

 

For your Screen adjustment calc -100vw value can be adjust calc -50vw with any value, adjust until the object is not visible correctly

Thanks for Reading the Post. If you have any question Comment out.

Leave a Comment

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Share
Pin
Share