I am stuck trying to find an appropriate solution; without adding a lot of divs to my markup.
I need the content at the 1200px media query; to stay fixed at 1200 and in the centre. Which is working.
However, the row containers with background colours, shadows etc. to stay 100% of the width.
Any guidance on how best to solve this problem; would be very much appreciated.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
input[type=text] {
font-size: 1.5rem; padding: 0 0.25em 0 1.2em; height: 4rem;
line-height: 4rem; width: 50vw; color: #333;
background: #f5f5f5; border: 1px solid #f5f5f5;
}
.head_sticky {
position: sticky; top: 0; z-index: 100;
}
#media only screen and (max-width: 599px) {
.col-m-1 { width: 16.67%; } .col-m-2 { width: 33.33%; } .col-m-3 { width: 50.00%; }
.col-m-4 { width: 66.67%; } .col-m-5 { width: 83.33%; } .col-m-6 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 16px 5px 0;
}
.search_form_cls {
height: 4.5rem; line-height: 4.5rem; font-size: 3rem;
color: black; border: none; background: transparent;
}
input[type=text] {
width: 75vw;
}
}
#media only screen and (min-width: 600px) {
.col-t-1 { width: 12.5%; } .col-t-2 { width: 25%; } .col-t-3 { width: 37.5%; }
.col-t-4 { width: 50%; } .col-t-5 { width: 62.5%; } .col-t-6 { width: 75%; }
.col-t-7 { width: 87.5%; } .col-t-8 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 24px 5px 0;
}
}
#media only screen and (min-width: 768px) {
.col-d-1 { width: 8.33%; } .col-d-2 { width: 16.66%; } .col-d-3 { width: 25% }
.col-d-4 { width: 33.33% } .col-d-5 { width: 41.66% } .col-d-6 { width: 50%; }
.col-d-7 { width: 58.33%; } .col-d-8 { width: 66.66%; } .col-d-9 { width: 75%; }
.col-d-10 { width: 83.33%; } .col-d-11 { width: 91.66% } .col-d-12 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 28px 5px 0;
}
}
#media only screen and (min-width: 1200px) {
.A3_row {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
[class*='col-']:first-of-type {
padding-left: 16px;
}
[class*='col-']:last-of-type {
padding-right: 16px;
}
.A3_row {
display: flex; background-color: white;
}
.A3_row [class*='col-'] {
display: flex; align-items: center; flex-wrap: wrap;
}
.A3_row::after {
content: ""; clear: both; display: table;
}
.navigation_link
text-decoration: none; color: black;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='head' class='A3_row shadow_bottom head_sticky'>
<div class='col-m-1 col-t-1 col-d-1'>
<span class='navigation_link'>☰</span>
</div>
<div class='col-m-2 col-t-2 col-d-2'>
LOGO
</div>
<div class='col-m-3 col-t-5 col-d-9 t-end'>
<input autocomplete='off' name='q' class='search_form_m' type='text' placeholder='Search' value='' maxlength='100'>
</div>
</div>
<div class='A3_row' style='background-color:blueviolet; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:blueviolet;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:gold; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:gold;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:lightseagreen; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:lightseagreen;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row'>
<div class='col-m-6 col-t-8 col-d-12' style='align-items: flex-start'>
<span>FOOTER</span>
</div>
</div>
</body>
</html>
A CSS-only solution using calc():
#media only screen and (min-width: 1200px) {
.A3_row {
width: 100%;
padding-left: calc((100% - 1200px) / 2);
padding-right: calc((100% - 1200px) / 2);
}
}
This width declaration makes the "row" 100% of the width of its containing block while the padding-* declarations ensure the "content" is 1200px.
See calc() (MDN)
Related
Previously I had .container-fluid.megamenusip {overflow-y: scroll} which worked until it didn't (it broke the menu open/close button).
In a mobile view how do I scroll through each mega menu?
If I add back .container-fluid.megamenusip {overflow-y: scroll} it doesn't resolve the issue.
The live site is here.
Help appreciated.
window.addEventListener('load', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
window.addEventListener('resize', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
jQuery(document).ready(function() {
jQuery(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").click(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(); //{block:nearest}
}
});
jQuery(".toggle-menu").click(function() {
jQuery("#mm-mm-burger").toggleClass("display");
jQuery("#megamenusip").toggleClass("display");
jQuery("#mm-logo").toggleClass("fixed");
jQuery(".exo-menu").toggleClass("display");
jQuery("#mm-button-group").toggle();
jQuery(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
jQuery(".mega-menu")
.not(jQuery(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
jQuery(self).find("a span").toggleClass("hover");
jQuery(".exo-menu")
.find("a span")
.not(jQuery(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul>li>a:hover,
.flyout-mega ul>li>a:active,
.flyout-mega ul>li>a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
/*padding-right: 30px;*/
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: block;
margin-left: 46px;
font-size: 13px;
margin-top: -5px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4,
.row .col-md-6 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1359px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1358px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 1252px) and (max-width: 1358px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
}
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3.5%;
}
}
#media (min-width: 1340px) {
.mega-menu-wrap {
width: 1278px;
margin: auto;
}
}
#media (max-width: 1339px) {
.mega-menu-wrap {
width: calc(100vw - 80px);
margin: auto;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
padding-top: 0;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.row .col-md-2 {
width: 12%;
margin-right: 3%;
}
.row .col-md-3 {
width: 21.25%;
margin-right: 4%;
float: left;
padding-left: 0;
}
.row .col-md-3:last-of-type {
margin-right: 0;
}
.row .industries .col-md-3 {
width: 20.25%;
margin-right: 5%;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
.col-md-6 .col-md-6 {
width: 47%;
}
#col-use-cases {
margin-left: 2.5%;
margin-right: 1.5%;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) and (max-width: 788px) {
.exo-menu>li>a {
padding: 30px 13px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {margin-bottom: 27px;}
.mega-menu {background-color: white;}
.mega-menu-wrap {min-height: 306px;}
#mm-button-group {display: none !important;}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
/*padding: 0 15px;*/
}
}
.mega-menu.hide-block {
display: none !important;
}
#media (max-width: 768px) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
.admin-bar a.toggle-menu {
top: 64px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
a.toggle-menu {
position: fixed;
color: black;
top: 8px;
right: 0;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: url("/wp-content/themes/bb-theme-child/images/menu-open.svg");
font-weight: 900;
color: #000000;
}
a.toggle-menu.display::before {
content: url("/wp-content/themes/bb-theme-child/images/menu-close.svg");
color: #B2B2B2;
margin-right: 6px;
}
/*.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 10px;
margin-right: -10px;
}*/
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('/wp-content/themes/bb-theme-child/images/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/themes/bb-theme-child/images/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
.container-fluid.megamenusip.display {
height: calc(100% - 56px);
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li>Features</li>
<li>Templates</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>How it Works</li>
<li>Industries</li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li>Hospitality</li>
<li>Retail</li>
<li>Hair & Beauty</li>
</ul>
</div>
<div class="col-md-6">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li>Medical</li>
<li>Fitness</li>
<li>More</li>
</ul>
</div>
</div>
<div class="col-md-3" id="col-use-cases">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li>Blog</li>
<li>Case Studies</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>Help Centre</li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>
It doesn't make sense to keep header fixed for mobiles. Already real-estate is very less there. For mobiles make header relative/static and for desktops keep it sticky.
I couldn't get your code in OP working like the website. So tried things on the website itself using Dev tools.
Following CSS makes header non fixed for small screens:
#media (max-width: 768px) {
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: absolute; /* <-- */
display: -ms-flexbox;
display: flex;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
/* position: absolute; */ /* <-- */
top: 20px;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: absolute; /* <-- */
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
}
I think you make <header> sticky on big screens and relative on small ones. And don't use fixed on any children used absolute. For small screens make megamenusip non absolute.
Or take the megamenu part out of the <header> and make it floating relative to the scrolling parent. For wide screens use position fixed and for small use absolute.
In the snippet below, I have a card. In mobile/tablet, the video sits on top of the text content. In desktop, the content moves to the right, the video to the right.
The video should sit at the vertical center of the content div. I've tried align-items: center;, but it's not working and I think it might have something to do with the video, but I'm not sure.
I'm looking for the cleanest way to vertically align the video container with the content div on the left, then overlay the video container on top of the content div.
This is is the current setup:
// Video Thumbnail Script
$('.vid-thumb').on('click', function () {
$(this).remove();
$('.vid-ct').prepend(
'<script src="https://fast.wistia.com/embed/medias/2uzup7d1l3.jsonp" async><\/script><script src="https://fast.wistia.com/assets/external/E-v1.js" async><\/script><div class="wistia_embed wistia_async_2uzup7d1l3 videoFoam=true" style="width:100%;"> </div>'
);
window._wq = window._wq || [];
_wq.push({
id: '2uzup7d1l3',
onReady: function (video) {
video.play();
}
});
});
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
color: #000a70;
}
a {
text-decoration: none;
}
.img-fluid {
width: 100%;
height: auto;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-nextiva h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-slider {
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider {
flex-flow: row;
align-items: center;
}
}
.video-slider__video {
order: 1;
}
.video-slider__video .vid-ct {
width: 100%;
}
#media (min-width: 768px) {
.video-slider__video .vid-ct {
min-height: 388px;
}
}
#media (min-width: 992px) {
.video-slider__video .vid-ct {
min-height: 524px;
}
}
#media (min-width: 1024px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
#media (min-width: 1200px) {
.video-slider__video {
max-width: 50%;
order: 2;
}
}
.video-slider__content {
padding: 2rem;
background: #F2F5F9;
order: 1;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider__content {
order: 1;
justify-content: center;
height: 600px;
padding: 10rem 18.5rem 10rem 4rem;
}
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.txt-link {
display: inline-flex;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.125rem;
position: relative;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="people-love-nextiva">
<h2>People love Animals.</h2>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb">
<img class="img-fluid vid-thumb-img lazy" loading="lazy" srcset="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=576&h=416 576w,
https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=768w&h= 768w"
src="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg&w=576"
sizes="(min-width: 320px) 100vw" alt="Phat Scooters - A Nextiva Customer Success Story">
</div>
</div>
</div>
<div class="video-slider__content">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, porro.</p>
<span class="txt-link arrow-link">
Read more
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
</div>
I do not believe there is one "best" solution, as there are multiple solutions, one will probably match better than another according to your HTML structure:
.my-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
// align vertically and horizontally:
// left: 50%;
// transform: translate(-50%, -50%);
}
Another way would be to do it through the flexbox property:
.parent {
display: flex;
}
.parent .child {
margin: auto;
}
And another one through table-cell:
.parent p {
display: table-cell;
vertical-align: middle;
}
To overlay I would probably go with the first solution as it lets you easily play with the position, and then put a z-index to make sure the video is the first layer.
Otherwise (personally dislike) I would play with negative margin on your video container.
Custom css (media queries) work for WordPress and inspector but not on live site.
I added the meta viewport tag to the HTML but still it's not working.
/* Media Queries */
/* small phones */
#media (max-width: 320px) {
#intro {
margin-left: 20px;
width: 85%;
}
.logo-image {
position: relative;
}
.logo-img {
display: none;
}
main {
width: 85%;
position: relative;
top: 0px;
}
.card {
width: 85%;
}
.card .card-image img {
width: 100%;
}
footer {
flex-direction: column;
text-align: center;
}
footer #left-footer {
flex: 1;
border-right: 0;
padding-left: 0;
}
footer #right-footer {
background: #eee;
color: black;
}
footer #right-footer a {
color: black;
}
footer #social-media-footer ul li:hover a .fa-instagram {
color: purple;
transition: 0.4s;
}
nav ul {
display: none;
}
#menu-icon {
display: flex;
}
#slideout-menu {
display: block;
text-align: center;
}
#searchbox {
display: none;
}
#blogpost {
width: 100%;
border-left: 0;
}
#sidebar {
display: none;
}
.comment-form {
width: 70%;
}
}
#media (max-width: 320px) {
#slideout-menu {
width: 65%;
}
#logo-img {
display: none;
}
#intro {
width: 95%;
height: 120vw;
}
#intro .logo-image {
width: auto;
height: auto;
max-width: 680px;
max-height: 750px;
position: relative;
right: 18px;
top: 50px;
}
main {
width: 95%;
margin-top: 0px;
}
.card {
width: 95%;
}
.card .card-image img {
width: 100%;
}
.logo-img {
display: none;
}
.card .card-description {
width: 100%
}
}
#media (min-width: 375px) and (max-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
#nav ul {
display: none;
}
#slideout-menu {
width: 65%;
}
#logo-img {
display: none;
}
#intro {
width: auto;
height: 120vw;
}
#intro .logo-image {
width: auto;
height: auto;
max-width: 800px;
max-height: 750px;
position: relative;
right: 5px;
top: 50px;
}
main {
width: 85%;
margin-top: 0px;
}
.card {
width: 95%;
}
.card .card-image img {
width: 100%;
}
.logo-img {
display: none;
}
.card .card-description {
width: 100%
}
nav ul {
display: none;
}
#menu-icon {
display: flex;
}
#slideout-menu {
display: block;
text-align: center;
}
#searchbox {
display: none;
}
#sidebar {
display: none;
}
#comments-section {
width: 140%;
}
}
#media (min-width: 720px) {
.logo-image {
display: flex;
}
main {
width: 95%;
}
.card {
width: 45%;
}
.card .card-image img {
width: 100%;
}
}
/* Tablet */
#media screen and (min-width: 668px) and (max-width: 768px) {
nav {
font-size: 2vw;
}
#logo-img {
height: auto;
width: auto;
max-width: 680px;
max-height: 750px;
}
#intro {
width: auto;
height: 100vw;
}
#intro .logo-image {
width: auto;
height: auto;
max-width: 1500px;
max-height: 1000px;
position: relative;
right: 10px;
top: 10px;
}
main {
width: 95%;
}
section {
flex-direction: column;
}
.card,
.card .Card Image img {
width: 100%;
}
footer {
flex-direction: column;
text-align: center;
}
footer #left-footer {
flex: 1;
border-right: 0;
padding-left: 0;
}
footer #right-footer {
background: #eee;
color: black;
}
footer #right-footer a {
color: black;
}
footer #social-media-footer ul li:hover a .fa-instagram {
color: purple;
transition: 0.4s;
}
#searchbox {
display: ;
}
}
#media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
nav ul {
display: flex;
list-style: none;
padding: 0 150px;
justify-content: space-around;
align-items: center;
height: 100%;
margin: 0;
}
#logo-img {
left: 30px
}
.logo-image {
display: flex;
}
main {
width: 95%;
}
.card {
width: 45%;
}
.card .card-image img {
width: 100%;
}
}
/* ----------- Retina Screens ----------- */
#media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
#logo-img {
left: 30px
}
.logo-image {
display: flex;
}
main {
width: 95%;
}
.card {
width: 45%;
}
.card .card-image img {
width: 100%;
}
#logo-img {
height: auto;
width: auto;
max-width: 680px;
max-height: 750px;
}
#intro {
width: auto;
height: 100vw;
}
#intro .logo-image {
width: auto;
height: auto;
max-width: 2500px;
max-height: 1000px;
position: relative;
right: 10px;
top: -200px;
}
main {
width: 95%;
}
section {
flex-direction: column;
}
.card,
.card .Card Image img {
width: 100%;
}
footer {
flex-direction: column;
text-align: center;
}
footer #left-footer {
flex: 1;
border-right: 0;
padding-left: 0;
}
footer #right-footer {
background: #eee;
color: black;
}
footer #right-footer a {
color: black;
}
footer #social-media-footer ul li:hover a .fa-instagram {
color: purple;
transition: 0.4s;
}
#searchbox {
display: ;
}
}
#media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
nav ul {
display: flex;
list-style: none;
padding: 0 200px;
justify-content: space-around;
align-items: center;
height: 100%;
margin: 0;
}
#logo-img {
left: 30px
}
}
Here is the HTML
">
/img/fuchsifuchs.png" alt="fuchsifuchs.png" class="fuchs-intro"/>
">
Gedichte
'post',
'posts_per_page' => 2,
);
$Gedichteposts = new WP_QUERY($args);
while($Gedichteposts->have_posts()) {
$Gedichteposts->the_post();
?>
">
"
alt="Card Image">
">
" class="btn-readmore"> weiter erkunden
</section>
<a href="<?php echo site_url('/projects'); ?>">
<h2 class="section-heading"> Kurzgeschichten</h2>
<section>
<?php
$args = array(
'post_type' => 'project',
'posts_per_page' => 2,
);
$project = new WP_QUERY($args);
while($project->have_posts()) {
$project->the_post();
?>
<div class="card">
<div class="card-image">
<a href=" <?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>"
alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink() ?>">
<h3><?php the_title(); ?></h3>
</a>
<p><?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
weiter erkunden
</div>
</div>
<?php }
wp_reset_query();
?>
</section>
<a href="<?php echo site_url('/about'); ?>">
<h2 class="section-heading"> Das bin ich</h2>
<section id="section-source">
<p>
Wenn Ihr mehr über mich und meine Geschichte erfahren wollt, schaut gerne hier rein. Ich erzähle euch, wie es zu diesem Blog gekommen ist und warum ihr rein schauen solltet.
</p>
Instagram Profil
</section>
A common issue I encounter when trying to write css from the WordPress admin panel is that my css is being overwritten. To solve this, you can try to match the specificity of the already existent css or if you are brave just add "!important" before the ";" of every rule.
Would recommend looking into specificity first, though.
I've just upgraded my site to include responsive styles, but when I uploaded the changes, the fallback (original / fluid) styles don't work. It just uses the highest min-width responsive styles. What did I do wrong?
My site is http://jcwebandgraphic.com/
HTML
<body>
<!-- #nav-bkg: Nav BKG Image Scrollstop -->
<div id='nav-bkg' class='scroll'>
<img src='images/dandelion-nav-color.png'>
<img src='images/dandelion-nav.png'>
</div> <!-- Closes #nav-bkg -->
<!-- nav: Top Nav -->
<nav role='navigation'>
<ul>
<li><a href='#services-section'>Services</a></li>
<!--
<li><a href='#products-section'>Products</a></li>
-->
<li><a href='#work-section'>Work</a></li>
<li><a href='#contact-section'>Contact</a></li>
</ul>
</nav> <!-- Closes Top Nav -->
<!-- #logo: Logo -->
<div id='logo-container'>
<img id='logo' src='images/logo2.png'>
</div> <!-- Closes #logo -->
<!-- #page-wrapper Page Wrapper -->
<div id='page-wrapper' role='main'>
<!-- .scroll: Site BKG Image Scrollstop -->
<div class='scroll'>
<img src='images/dandelion-color.jpg'>
<img src='images/dandelion-greyscale.jpg'>
</div> <!-- Closes .scroll -->
<!-- #about-section: About Me-->
<section id='about-section'>
<h2 class='subtitle'>About Us</h2>
<p>
Welcome! We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web development, graphic design, hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for all your modern web, printing, and signage needs. Check out our remarkably affordable rates below or request a quote for our best pricing option.
</p>
</section> <!-- Closes #about-section -->
<!-- #services-section: Service Types Offered -->
<section id='services-section' class='main-section-styles'>
<h2 class='subtitle'>Services</h2>
<!-- .fa-icon: Large FA Icon Container -->
<div id='fa-icon'>
<div class='icon'>
<i class='fa fa-laptop icon-fixed-width fa-3x'></i>
<h5>Web</h5>
</div>
<div class='icon'>
<i class='fa fa-magic icon-fixed-width fa-3x'></i>
<h5>Graphic</h5>
</div>
<div class='icon'>
<i class='fa fa-connectdevelop icon-fixed-width fa-3x'></i>
<h5>Hosting</h5>
</div>
<div class='icon'>
<i class='fa fa-wrench icon-fixed-width fa-3x'></i>
<h5>IT</h5>
</div>
</div> <!-- Closes .fa-icon -->
</section> <!-- Closes #services-section -->
<!-- #specials: Specials -->
<section id='specials' class='main-section-styles'>
<h2 class='subtitle'>Specials</h2>
<div class='offer'>
<p>
Static Single-Page Site just $99!
</p>
<p>
2 Years of Hosting + IT just $75!
</p>
<br>
<span>
Offers end November 1st, 2015
</span>
</div>
</section> <!-- Closes #specials -->
<!-- #work-section: Portfolio Examples -->
<section id='work-section' class='main-section-styles'>
<h2 class='subtitle'>Work</h2>
<ul class='slider'>
<img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'>
<img src='images/air.jpg' alt='Professional Project: Audio Information Radio'>
<img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'>
<img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'>
<img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'>
<img src='images/placestory.jpg' alt='Student Project: This is Me'>
<img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'>
<img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'>
</ul>
</section>
<!-- #contact-section: Contact Form & Info -->
<section id='contact-section' class='main-section-styles'>
<h2 class='subtitle'>Contact</h2>
<br><br>
Phone: <a href='callto:+13602810359'> 360-281-0359</a>
<address>Email: <a href='mailto:info#jcwebandgraphic.com'> info#jcwebandgraphic.com</a></address>
<br>
<div id='contactform'>
<form action='contact.php' method='post'>
<div class='contact-wrap'>
<p>Your Name :<input class='type' type='text' name='cf_name'></p>
<p>Your E-mail:<input class='type' type='text' name='cf_email'></p>
<p class='antispam'>Spam-Bots!:<input class='type' type='text' name='url' placeholder='** Leave Blank **'></p>
</div>
<div class='contact-wrap'>
<p id='message'>
Message:
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</p>
</div>
</form>
</div> <!-- Closes #contactform -->
</section> <!-- Closes #contact-section -->
<footer>
<p id='copyright'>
© JC Web & Graphic 2015
</p>
<!--
<p>
<a href='resume.pdf' target='_blank'>Download Resume</a>
</p>
-->
</footer>
</div> <!-- Closes #page-wrapper -->
</body>
</html>
CSS Fallback
#media screen and (min-width: 1000px) {
body {
width: 100%;
background-color: #696773;
}
footer {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
/* **************************************** Menu Styles **************************************** */
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 600;
}
nav ul {
width: 100%;
}
nav ul li {
width: 30.333%;
padding: 1.5%;
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
nav ul li a {
width: 98%;
padding: 2% 7%;
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #ffffff;
outline: 1px solid #ffffff;
}
#nav-bkg {
z-index: 500;
}
/* **************************************** Logo Styles **************************************** */
#logo-container {
width: 20%;
margin: 20% 40% 3% 40%;
}
#logo {
width: 100%;
}
/* ************************************* Scrollstop Styles ************************************* */
.scroll {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.scroll img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroll img:first-child {
opacity: 1;
}
.scroll img:nth-child(2) {
opacity: 1;
transition-duration: 1s;
transition-timing-function: ease;
}
/* ************************************ Main Content Styles ************************************ */
section {
width: 90%;
margin: 0;
margin-top: 1%;
padding: 5%;
background-color: #ffffff;
color: #696773;
overflow: auto;
}
.subtitle {
font-family: 'hipstelveticaultralight';
font-size: 1.9em;
font-weight: 200;
color: #50E5C0;
}
/* Services Section Styles */
#services-section {
width: 34%;
height: 350px;
margin: 2% 1% 2% 5%;
background-color: #696773;
float: left;
opacity: .95;
}
#services-section .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#services-section #fa-icon {
width: 100%;
text-align: center;
}
#services-section #fa-icon .icon {
width: 25%;
color: #f26da5;
float: left;
}
#services-section #fa-icon i {
padding-bottom: 15%;
}
#services-section h5 {
margin-top: 10%;
font-size: .75em;
text-align: center;
color: #ffffff;
border-top: 1px solid #ffffff;
}
/* Specials Section Styles */
#specials {
width: 34%;
height: 350px;
margin: 2% 5% 2% 1%;
background-color: #696773;
color: #ffffff;
float: right;
opacity: .95;
}
#specials .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#specials p {
color: #50E5C0;
}
#specials span {
margin-top: 1em;
font-size: .7em;
float: right;
}
/* Work Section Styles */
#work-section {
width: 80%;
margin: 0 5%;
}
#work-section img {
width: 22%;
padding: 1%;
box-shadow: 0 0 8px #696773;
}
/* Contact Section Styles */
#contact-section {
margin-top: 5%;
color: #ffffff;
background-color: #696773;
opacity: .95;
}
#contact-section .subtitle {
color: #ffffff;
}
.contact-wrap {
width: 50%;
float: left;
}
#contact-section address {
font-style: normal;
}
#contact-section p {
text-indent: 2em;
}
#contact-section p .type {
width: 75%;
margin: .5%;
padding: .5%;
font-size: 1em;
color: #ffffff;
background-color: #696773;
border-radius: 5px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section a {
color: #ffffff;
text-decoration: none;
font-style: normal;
}
#contact-section a:hover {
text-decoration: underline;
}
.antispam ::-webkit-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-ms-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
#contact-section textarea {
width: 78%;
margin: .5%;
padding: .5%;
color: #ffffff;
background-color: #696773;
border-radius: 3px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section #message .button {
width: 20%;
margin: 1.5%;
font-size: .75em;
color: #696773;
background-color: #ffffff;
border: initial;
border-radius: 5px;
border: 1px solid #CCC0B7;
float: right;
}
#contact-section #message .button:hover {
color: #ffffff;
background-color: #696773;
}
/* Footer Section Styles */
footer #copyright {
margin-top: 10%;
padding: .5%;
text-align: center;
color: #686673;
background-color: #ffffff;
}
footer p {
text-align: center;
}
footer a {
padding: 0;
color: #F26DA5;
}
}
CSS Responsive
#media screen and (min-width: 300px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: hidden;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 70%;
margin: 40% 15% 25% 15%;
}
#logo-container img {
opacity: 1!important;
}
/* ************************************ Menu Styles ************************************ */
nav {
height: 30px;
padding-bottom: 1em;
background-color: #696773;
}
nav a {
font-size: .75em;
}
nav ul li a:hover {
outline: initial;
font-size: 1em;
}
#nav-bkg img {
visibility: hidden;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.25em;
}
p {
font-size: .85em;
text-align: justify;
}
#services-section {
width: 80%;
margin: 5% 10%;
padding: 0;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
#services-section h5 {
margin: 0;
padding: 0;
font-size: 1em;
border-top: none;
}
#specials {
width: 80%;
margin: 5% 10%;
padding: 0;
float: right;
}
#work-section {
width: 100%;
margin: 0;
padding: 0;
}
#work-section .slider img {
width: 96%;
margin: 2%;
padding: 0;
}
#contact-section {
width: 90%;
margin: 15% 0;
padding: 5%;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contact-section p {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#contact-section p .type {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section .contact-wrap {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
#contactform {
margin-top: 15%;
}
#contact-section textarea {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section #message .button {
width: 50%;
margin: 0;
padding: 0;
}
br {
display: none;
}
}
#media screen and (min-width: 500px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
margin: 45% 15%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#about-section {
width: 70%;
padding: 10% 15% 20% 15%;
}
#about-section p {
padding-bottom: 20%;
border-bottom: 1px solid #696773;
}
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#specials {
margin: 5% 10% 25% 10%;
}
}
#media screen and (min-width: 600px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 50%;
margin: 45% 25%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.5em;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
}
#media screen and (min-width: 700px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 40%;
margin: 40% 30%;
}
/* ************************************ Menu Styles ************************************ */
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
height: 400px;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
height: 400px;
padding: 0;
float: right;
}
#work-section .slider img {
width: 46%;
margin: 2%;
float: left;
}
}
#media screen and (min-width: 900px) and (max-width: 999px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: visible;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 30%;
margin: 15% 35%;
}
#logo-container img {
opacity: 1;
}
/* ************************************ Menu Styles ************************************ */
nav {
background-color: initial;
}
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
#nav-bkg img {
visibility: visible;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
border: none;
}
#services-section #fa-icon .icon {
width: 25%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
float: right;
}
#work-section {
padding-bottom: 5%;
}
#work-section .slider img {
width: 23%;
margin: 1%;
float: left;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contactform {
margin-top: 5%;
}
}
Because both sections are defined as min-width, both sections will be applied when the display area is over 1000px and only the min-width:300 section will be applied when it is over 300px.
Since both sections are applied, the browser will resort to the standard css rules for prioritization of similar styles. (see http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)
If you want to be more explicit, you could specify:
#media screen and (min-width: 300px) and (max-width: 999px)
and your responsive styles will stop getting applied after that point.
------------------ edit in response to comment:
If I am understanding what you are looking for it would require the ability to nest the #media queries, but it is not supported.
eg:
#media screen and (max-width:999px)
{
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
}
This way your responsive styles would stop at 999px but they would be cumulative up until that point?
I believe the only way to accomplish writing this logically would be to use LESS or SCSS. Which would compile your css and rewrite it exactly the way you are trying to avoid...
I think the best you can do would be:
#media screen and (min-width:300px) and (max-width:999px)
{ }
#media screen and (min-width:600px) and (max-width:999px)
{ }
#media screen and (min-width:900px) and (max-width:999px)
{ }
Or better yet try something like this:
#import url(responsive.css) screen and (max-width: 999px);
and in responsive.css:
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
This was suggested in another thread I saw: Nesting #media rules in CSS
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>