Connect Your Products with the Digital Dimension

/* This crops the image aspect ratio to 16:9 and keeps the height 100% to the parent container. The class diviwp-blurb-14-portrait have been added to the image class for this to work as well as diviwp-row-flex to the row class and divi-col-flex to the first column. If you'd like to adjust the aspect ratio, use the percentages as defined below: Square 1:1 = 100% Landscape 16:9 = 56.25% Landscape 4:3 = 75% Landscape 3:2 = 66.67% Portrait 9:16 = 177.78% Portrait 3:4 = 133.34% Portrait 2:3 = 150% Further comments are outlined below. */ @media only screen and ( min-width: 980px ) and ( max-width: 2800px ) { .et-db #et-boc .et-l .diviwp-col-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* Uncomment the following two classes if you want to crop the aspect ratio for desktop. See percentages above to change the image aspect ratio. .et-db #et-boc .et-l .diviwp-blurb-14-portrait .et_pb_image_wrap { padding-top: 100%; display: block; position: inherit; } .et-db #et-boc .et-l .diviwp-blurb-14-portrait img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; } */ /* comment this class out if you want to crop aspect ratio for desktop. This might result in the image not being visible in the Visual Builder in Desktop. */ .et-db #et-boc .et-l .diviwp-blurb-14-portrait img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } } /* Tablets in portrait mode (768-980px) */ @media only screen and ( min-width: 768px ) and ( max-width: 980px ) { /* We crop the image to 16:9 aspect ratio in tablets and below to reduce the overall size of the image. If we didn't crop it to 16:9 the image would take up huge vertical space which would result in a sub-optimal user experiece. Uncomment or remove the following two classes if you do not want to crop the aspect ratio */ .et-db #et-boc .et-l .diviwp-blurb-14-portrait .et_pb_image_wrap { padding-top: 56.25%; display: block; position: inherit; } .et-db #et-boc .et-l .diviwp-blurb-14-portrait img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; } } /* Smartphones in landscape mode (480-768px) */ @media only screen and ( min-width: 480px ) and ( max-width: 767px ) { /* We crop the image to 16:9 aspect ratio in tablets and below to reduce the overall size of the image. If we didn't crop it to 16:9 the image would take up huge vertical space which would result in a sub-optimal user experiece. Uncomment or remove the following two classes if you do not want to crop the aspect ratio */ .et-db #et-boc .et-l .diviwp-blurb-14-portrait .et_pb_image_wrap { padding-top: 56.25%; display: block; position: inherit; } .et-db #et-boc .et-l .diviwp-blurb-14-portrait img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; } } /* Smartphones in portrait mode (0-479px) */ @media only screen and ( max-width: 479px ) { /* We crop the image to 16:9 aspect ratio in tablets and below to reduce the overall size of the image. If we didn't crop it to 16:9 the image would take up huge vertical space which would result in a sub-optimal user experiece. Uncomment or remove the following two classes if you do not want to crop the aspect ratio */ .et-db #et-boc .et-l .diviwp-blurb-14-portrait .et_pb_image_wrap { padding-top: 56.25%; display: block; position: inherit; } .et-db #et-boc .et-l .diviwp-blurb-14-portrait img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; -o-object-fit: cover; object-fit: cover; } }