Hi All,
Just trying to figure out how to customise my theme to make it mobile friendly, mainly the header. My banner stretches awkwardly on a mobile (I have an iPhone 6s), and I just need it fitted appropriately – I believe the dimensions are 480px – could be wrong.
I’ve been playing around with the CSS/HTML but can’t figure out how to do this.
I keep reading online it has something to do with “@media screen” coding but I can’t figure out where to place it in the HTML, etc.
The help/faq on bigcartel.com is of no use and I’ve tried emailing support to no avail.
CSS for header:
header {
*zoom: 1;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;
background: {{ theme.header_background_color }};
font-family: {{ theme.primary_font | font_family }};
height: 90px;
left: 0;
margin: 0;
padding: 20px 0;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
}
header:after {
content: "";
display: table;
clear: both;
}
} header {
position: absolute;
}
}
header.background_overlay {
background: {{ theme.header_background_color }} !important;
}
header .store_name {
color: {{ theme.header_text_color }};
float: left;
font-size: 20px;
margin-left: 40px;
max-width: 60%;
}
header .store_name {
margin-left: 20px;
}
header .store_name {
margin-left: 20px;
}
header .store_name a {
color: {{ theme.header_text_color }};
display: block;
line-height: 1.2em;
}
header .store_name.text {
height: 50px;
}
header .store_name.text a {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
}
header .store_name.image {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
}
header .store_name.image a {
height: 50px;
}
header .store_name.image a img {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
display: block;
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header .header_icons {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
height: 30px;
list-style: none;
position: absolute;
right: 40px;
}
@media screen and (max-width: 480px) {
header .header_icons {
right: 20px;
}
}
header .header_icons li {
display: inline-block;
font-size: 0;
height: 30px;
margin-left: 30px;
}
header .header_icons li a {
color: {{ theme.header_text_color }};
display: block;
font-size: 14px;
position: relative;
}
header .header_icons li a svg {
fill: {{ theme.header_text_color }};
height: 30px;
width: 30px;
}
header .header_icons li.open_search a {
top: 1px;
}
header .header_icons li.open_cart {
margin-left: 23px;
}
@media screen and (max-width: 668px) {
header .header_icons li.open_cart {
display: none;
}
}
header .header_icons li.open_menu a {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
height: 16px;
width: 22px;
}
header .header_icons li.open_menu a span {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
display: block;
background: {{ theme.header_text_color }};
width: 100%;
height: 2px;
position: absolute;
left: 0;
opacity: 1;
}
header .header_icons li.open_menu a span:nth-child(1) {
top: 0px;
}
header .header_icons li.open_menu a span:nth-child(2), header .header_icons li.open_menu a span:nth-child(3) {
top: 50%;
}
header .header_icons li.open_menu a span:nth-child(4) {
top: 99%;
}