Skip to content

Instantly share code, notes, and snippets.

@cwylie0

cwylie0/location.css

Created Aug 14, 2019
Embed
What would you like to do?
Location Page 2019
* {
box-sizing: border-box;
}
.contactInfo {
background: #f2f2f2;
width: 25%;
float: right;
padding: 15px;
}
.powButton {
background-color: #2E6E31;
color: white;
text-indent: 0;
display: inline-block;
font-family: Arial;
font-size: 20px;
font-weight: bold;
font-style: normal;
height: 40px;
width: 100%;
line-height: 40px;
text-decoration: none;
text-align: center;
float: right;
margin: 3px;
}
/* Multiple Locations Pages */
.wrapper {
padding: 5px;
width: 99%;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.17);
box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.17);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
}
.column {
flex: 1;
margin: 2px;
/*
background-color: aliceblue;
border: 1px solid gray;
*/
padding: 10px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
.actionButtonList li {
display: inline-block;
}
.actionButton {
background-color: #44a147;
color: white;
padding: 7px;
margin: 3px 0px 3px 0px;
text-align: center;
width: 32%;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
}
.actionButton a {
color: white;
}
.locationPhoto {
width=100%;
height=100px;
}
/* Appointment Scheduler */
.scheduler {
overflow: hidden;
height: 730px;
}
.setmore {
position: relative;
top: -72px;
width: 100%;
}
/* Device Repair Categories */
#subcategories {
width: 100%;
text-align: center;
padding-left: 3px;
}
li.category-list {
width: 16%;
padding-left: 3px;
float: left;
list-style: none;
}
/* Youtube Embeds */
.containerA {
position: relative;
}
.vid_container {
position: relative;
padding: 25% 50%;
width: 0;
}
.vid_container iframe,
.vid_container object,
.vid_container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Store Photos */
.store_photos div {
display: inline-block;
overflow: hidden;
height: 300px;
padding: 5px;
width: 50%;
}
.store_photos img {
height: 100%;
width: auto;
}
/* Safari Only Menu Fix */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
/*
Define here the CSS styles applied only to Safari browsers
(any version and any device)
*/
body #mega_menu_plus ul.mg-menu.menu-content>li {
width: 11%;
}
}
}
/* Responsive */
@media (max-width:640px) {
#subcategories {
width: 100%;
}
li.category-list {
width: 100%;
}
}
@media (max-width:770px) {
.store_photos div {
width: 100%;
height: auto;
}
.store_photos img {
height: auto;
width: 100%;
}
.col_2 {
width: 100%;
}
#subcategories {
width: 100%;
}
li.category-list {
width: 100%;
}
.socialMedia {
display: none;
}
.scheduler {
overflow: hidden;
height: auto;
}
.setmore {
margin-top: 10px;
position: relative;
width: 100%;
}
}
@media (min-width:990px) {
.store_photos div {
height: 395px;
}
.locations #map {
height: 650px;
}
}
@media (min-width:1300px) {
.store_photos div {
height: 495px;
}
.locations #map {
height: 650px;
}
}
@media screen and (min-width: 48em) {
.containerA:before {
content: '';
float: right;
display: block;
width: 500px;
height: 350px;
margin: 0 0 15px 15px;
}
.youtube {
position: absolute;
top: 0;
right: 0;
width: auto;
}
}
/* Multiple Location Pages Responsive */
@media screen and (max-width: 980px) {
.columns .column {
margin-bottom: 5px;
flex-basis: 40%;
&:nth-last-child(2) {
margin-right: 0;
}
&:last-child {
flex-basis: 100%;
margin: 0;
}
}
.actionButtonList li {
display: block;
}
.actionButton {
width: 100%;
}
.locationPhoto {
width: 100%;
height: auto;
}
}
@media screen and (max-width: 680px) {
.columns .column {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.