spotonlynne Posted December 22, 2021 Author Share Posted December 22, 2021 On 9/8/2021 at 1:28 AM, tuanphan said: Add to Design > Custom CSS /* Align logo page content - bigger screen */ article .content-wrapper { max-width: 100% !important; } @tuanphan that code made the content go wider to match where the logo currently sits. The designer wants the site width to be 1280 pixels and everything to line up within that width. See image attached. I am wondering if because there is already so much CSS code, something is conflicting? Would you have time to have a look for me please? This is the code you gave me before: /* header layout */ @media screen and (min-width:768px) { .header-announcement-bar-wrapper { padding: 0px !important; } .header-nav { height: 100px !important; flex: 60% !important; width: 60% !important; background-color: #EDEAE2; padding-right: 5vw; } .header-title { width: 40% !important; flex: 40% !important; } .header-nav-item { height: auto !important; } .header-nav-wrapper { height: 100% !important; } nav.header-nav-list { height: 100% !important; display: flex; justify-content: center; align-items: center; } .header-title-logo a { padding-top: 20px; padding-bottom: 20px; padding-left: 5vw; } .header-nav-item--active a { background-image: none !important; } .header-nav-item { height: 100% !important; vertical-align: middle; display: flex; align-items: center; } .header-nav-item--active:after { content: ""; background-color: #F6FF00; display: block; width: 10px; height: 5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } } /* nav color */ .header-nav-item a { color: #1e2a52 !important; } .header-nav-item a:hover { color: #727786 !important; } .header-nav-folder-item a { color: #fff !important; } .header-nav-folder-content { top: 70px !Important; } .header-nav-item { position: relative; } Link to comment
tuanphan Posted December 23, 2021 Share Posted December 23, 2021 21 hours ago, spotonlynne said: @tuanphan that code made the content go wider to match where the logo currently sits. The designer wants the site width to be 1280 pixels and everything to line up within that width. See image attached. I am wondering if because there is already so much CSS code, something is conflicting? Would you have time to have a look for me please? This is the code you gave me before: /* header layout */ @media screen and (min-width:768px) { .header-announcement-bar-wrapper { padding: 0px !important; } .header-nav { height: 100px !important; flex: 60% !important; width: 60% !important; background-color: #EDEAE2; padding-right: 5vw; } .header-title { width: 40% !important; flex: 40% !important; } .header-nav-item { height: auto !important; } .header-nav-wrapper { height: 100% !important; } nav.header-nav-list { height: 100% !important; display: flex; justify-content: center; align-items: center; } .header-title-logo a { padding-top: 20px; padding-bottom: 20px; padding-left: 5vw; } .header-nav-item--active a { background-image: none !important; } .header-nav-item { height: 100% !important; vertical-align: middle; display: flex; align-items: center; } .header-nav-item--active:after { content: ""; background-color: #F6FF00; display: block; width: 10px; height: 5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } } /* nav color */ .header-nav-item a { color: #1e2a52 !important; } .header-nav-item a:hover { color: #727786 !important; } .header-nav-folder-item a { color: #fff !important; } .header-nav-folder-content { top: 70px !Important; } .header-nav-item { position: relative; } Add to Design > Custom CSS header#header, article section:first-child { max-width: 1280px; margin-left: auto; margin-right: auto; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment