From d3b4bdf1d5ab7a5f1e660fdb83bb38a606d86c75 Mon Sep 17 00:00:00 2001 From: Sagnik Ganguly Date: Tue, 14 Feb 2023 18:25:16 +0530 Subject: [PATCH] ADDED: Component: Containers: Use containers (.container(-fluid) to define a flexible & responsive padding and container for the content of a page to stretch/shrink across different viewports. --- src/css/components/containers.css | 36 +++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/css/components/containers.css diff --git a/src/css/components/containers.css b/src/css/components/containers.css new file mode 100644 index 00000000..23585b64 --- /dev/null +++ b/src/css/components/containers.css @@ -0,0 +1,36 @@ +/* + * Copyright (c) 2022-2023 SGNetworks. All rights reserved. + * + * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited. + * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES. + */ + +.container { + padding: 0 15px; + margin: 0 auto; + width: 100%; +} + +@media only screen and (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media only screen and (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media only screen and (min-width: 1200px) { + .container { + max-width: 1170px; + } +} + +.container-fluid { + width: 100%; + padding: 0 15px; + margin: 0 auto; +}