Scribd
Upload
65 views2 pages

CSS Tips

This document provides guidance on media queries and element spacing across different screen widths. It notes that from 1920px to 1100px, left-right spacing is maintained with row max-width, while below 1100px it is maintained with padding. From 1023px to below, margin-left and margin-right are used. It also includes specific CSS code to set margins and prevent elements from taking 100% width below certain breakpoints. Common problems and solutions are listed, such as elements not appearing side-by-side when display-flex is used due to existing margins or paddings.

Uploaded by

Rover
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
65 views2 pages

CSS Tips

This document provides guidance on media queries and element spacing across different screen widths. It notes that from 1920px to 1100px, left-right spacing is maintained with row max-width, while below 1100px it is maintained with padding. From 1023px to below, margin-left and margin-right are used. It also includes specific CSS code to set margins and prevent elements from taking 100% width below certain breakpoints. Common problems and solutions are listed, such as elements not appearing side-by-side when display-flex is used due to existing margins or paddings.

Uploaded by

Rover
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

### FROM 1920PX -1100PX LEFT-RIGHT SPACE IS MAINTAINED WITH ROW MAX WIDTH

### BELOW 1100PX LEFT-RIGHT SPACE IS MAINTAINE BY PADDING(SO ### DO NOT REMOVE THE
PADDING OF AN ELEMENT.
### IT WILL CAUSE A HUGE PROBLEM BELOW 1100PX)
### FROM 1023PX - BELOW LEFT-RIGHT SPACE IS MAINTAINED BY MARGIN-LEFT, MARGIN-RIGHT

-------------------------------------------------------------------------
### .fl-module-content {
margin-left: 0px;
margin-right: 0px;
}
The above mentioned style normally is used in the begining in 1920px.
And
@media screen and (max-width: 1023px)
.fl-module-content {
margin-left: 20px !important;
margin-right: 20px !important;
}
The above metioned style is used at (max-width: 1023px)
--------------------------------------------------------------------------
### To prevent col getting 100% width in any break-point of media queries.
.row---header-home .fl-col-group {
display: flex!important;
}
.row---header-home .fl-col{
clear: both;
float: none;
margin-left: auto;
margin-right: auto;
width: auto !important;
}
======================ROCKY'S MARGIN SET AT 992PX AND 1023PX================
@media screen and (max-width: 992px){

/* Global Margin set */


:-webkit-any(.mod---page-main-blue-heading, .mod---hm--link, .mod---hm-text-
block, .mod---hm-blurb, .) .fl-module-content{
margin-left: 30px !important;
margin-right: 30px !important;
}
.mod--body-title_content_top-menu .pp-sub-heading p a:hover, .row_left-
verticle-line-v2 p a:hover{
border-bottom: 1px solid !important;
color: inherit;
}
body:not(.home) article .fl-builder-contenSSt > .fl-row:first-child{
margin-top: 50px;
}

.col---menu .fl-col-content .fl-module:last-child .fl-module-


content, .home .col---menu .fl-col-content .fl-module:last-child .fl-module-content
{
margin-right: 20px !important;
}
.home .col---menu .fl-col-content{
justify-content: flex-end !important;
}
---------------------------
@media screen and (max-width: 1023px){

.fl-module-content{
margin-left: 20px !important;
margin-right: 20px !important;
}
===========================================================
### starting of media queries:
desktop/laptop(in beaver builder - large device):
1. @media screen and (min-width: 1024px) and (max-width: 1536px), screen and (min-
resolution: 120dpi) and (max-resolution: 168dpi){

}
[
*sart media queries from the above break-point.
* match any break-point above/more than 1200px using this queries.
* some miss-match will appear from 1024-1150px
* to fix those mis-match make anthor queries at--
]
(in beaver builder - large device):
2.@media screen and (max-width: 1200px){

iPad/laptop (in beaver builder - large device):


3.@media screen and (max-width: 1023px){

taplet(in beaver builder - medium device):


4.@media screen and (max-width: 992px){

mobile(in beaver builder - small device):


5.@media screen and (max-width: 767px){

PROBLEMS AND SOLUTIONS:


1. 'display-flex' is written in element container, but the elements are not flex
means not placed side to side.
SOLUTION: If the elements have margin or padding around them in previous upper
breakpoint, then for that margin/padding space, the elements are not placed
side to side.
So make sure they do not have margin/padding
2.

You might also like