18jl Login app,Pldt jili slot real money app.Recharge Every day and Get Bonus up-to 50%!

SJBaily
(@sjbaily)

7 years, 6 months ago

I am using Storefront’s own free child theme called Boutique. Even though it is already a child theme, I am still customizing it a little. Storefront’s header isn’t responsive from what I’m seeing and reading. Meaning it doesn’t resize, but my header is my logo, so I would like to have it show up correctly–a smaller version–on anything smaller than desktop. Someone somewhere must have tweaked the @media code for handheld to make a responsive header, but I cannot find the answer. Any help appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

(@burlesonbrad)

https://docs.woocommerce.com/document/customizing-responsive-theme-best-practices/

So, @sjbaily, you’re question is actually primarily a CSS question (and just-so-happens to be on a Storefront Child theme) ?? But lemme see if I can help….

Depending on what/which customization you’ve done, you’ll want to do a few media queries and add your custom image dimensions to each of these:

@media only screen and (max-width: 1000px)  { 
  /* Styles placed here will only apply to screens less than 1000 pixels wide */ 
}  
@media only screen and (max-width: 768px) { 
  /* Styles placed here will only apply to screens less than 768 pixels wide */ 
}  @media only screen and (min-width: 768px) { 
  /* Styles placed here will only apply to screens more than 768 pixels wide */ 
}

Right up there where the */ comments are is where you’ll want to add your tweaks to your header’s logo.

I hope that helps

Thread Starter

SJBaily

(@sjbaily)

7 years, 6 months ago

@burlesonbrad Hi Brad, Thanks for the effort. I do know about the @media, but can’t seem to make it work. Found some others with my issue and they used the following:

/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}

/* Logo size for desktop site */
@media screen and (min-width: 768px) {
.site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
height: auto;
max-height: none;
max-width: none;
width: 322px !important;
}
}

I even added the .custom-logo-link img and tried a few variations because 322 was not necessarily the size I needed, but to no avail. I cannot see where but perhaps some tweak I have already done in the Boutique style.css to the header to make the desktop version look as I want it to is overriding or maybe . . . I don’t know. I am hoping someone can look at my Boutique style.css added below and help.

Customized Storefront child Boutique style.css:


/* Creates the back to top button */
.topbutton {
height:50px;
width:50px;
position:fixed;
right:320px;
bottom:60px;
z-index:8;
background-image: url("https://www.seasonedandsexy.com/wp-content/uploads/2017/05/top_button.png");
background-repeat:no-repeat;
display:none;
}

.page-template-template-homepage, .widget_product_search form input[type="search"], .widget_product_search {
display:none !important;
} 

/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
	max-height: none !important;
        max-width: none !important;
        width: 322px !important;
}
}

body {
  background: #303030;
  -webkit-font-smoothing: subpixel-antialiased; }

body,
button,
input,
select,
textarea {
  font-family: 'Lato', sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  letter-spacing: 0 !important; }
  h1 a,
  h1 label,
  h2 a,
  h2 label,
  h3 a,
  h3 label,
  h4 a,
  h4 label,
  h5 a,
  h5 label,
  h6 a,
  h6 label {
    font-weight: 400; }

h1.woocommerce-products-header__title {
    color: #a80021; }

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
  font-weight: 400; }
  
.site-header {
  border-bottom: 0; }

.site-header, .header-widget-region {
    box-sizing: content-box;
}

.site-header {
    max-width: 67.141em;
    margin-left: auto !important; 
        background-repeat:no-repeat !important;
        }

.site-header {   
        margin-right: auto;
        padding-top: 0px;
        padding-right: 6em;
        padding-bottom: 0px;
        padding-left: 6em;
    box-sizing: content-box;
    clear: both;
}

.site-branding .site-title {
  font-family: 'Playfair Display', serif; }

.site-branding .site-title a {
  font-weight: 400; }

.storefront-product-section {
  margin-bottom: 4.236em; }

.storefront-product-section,
.hentry {
  border-bottom-style: double;
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.025); }

.sku_wrapper {
display:none !important;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce-product-rating,
.woocommerce-breadcrumb {
  text-transform: uppercase; }

.woocommerce-breadcrumb {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .woocommerce-breadcrumb a {
    text-transform: none; }

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
  color: inherit;
  background: rgba(0, 0, 0, 0.025); }
  .woocommerce-error a,
  .woocommerce-error a:hover,
  .woocommerce-error .button,
  .woocommerce-error .button:hover,
  .woocommerce-info a,
  .woocommerce-info a:hover,
  .woocommerce-info .button,
  .woocommerce-info .button:hover,
  .woocommerce-message a,
  .woocommerce-message a:hover,
  .woocommerce-message .button,
  .woocommerce-message .button:hover,
  .woocommerce-noreviews a,
  .woocommerce-noreviews a:hover,
  .woocommerce-noreviews .button,
  .woocommerce-noreviews .button:hover,
  p.no-comments a,
  p.no-comments a:hover,
  p.no-comments .button,
  p.no-comments .button:hover {
    color: inherit;
    font-weight: normal; }
  .woocommerce-error a,
  .woocommerce-info a,
  .woocommerce-message a,
  .woocommerce-noreviews a,
  p.no-comments a {
    text-decoration: underline; }

.woocommerce-error {
  border-left-color: #e2401c; }

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  border-left-color: #3D9CD2; }

.woocommerce-message {
  border-left-color: #a80021; }

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
  margin-bottom: 0; }

.home h1 { display:none }

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget-area .widget a.button,
.site-header-cart .widget_shopping_cart a.button {
  box-shadow: inset 0 -0.327em 1.618em rgba(0, 0, 0, 0.1); }

button.menu-toggle {
  margin-bottom: 0; }

.boutique-primary-navigation {
  -webkit-font-smoothing: antialiased; }
  .boutique-primary-navigation::after {
    clear: both;
    content: "";
    display: table; }

.main-navigation ul li a::before {
    display: inline-block;
    font-size: inherit;
    -webkit-font-smoothing: antialiased;
    content: none !important;
    margin-right: .5407911001em;
}

.main-navigation ul.menu > li > ul,
.main-navigation ul.menu ul,
.site-header-cart .widget_shopping_cart {
  background-color: #212121; }
  
.main-navigation ul.menu, .main-navigation ul.nav-menu {
    text-align: right;
}

.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover {
    color: #ffffff;
}

.main-navigation ul li a:hover, .site-title a:hover, ul.menu li a:hover, .site-branding h1 a:hover {
    color: #a80021;
}

.main-navigation ul.menu, .main-navigation ul.nav-menu {
    max-height: none;
    overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
        }
        
.handheld-navigation  { 
  content: "" !important;   
        }

.woocommerce-pagination .page-numbers li .page-numbers.current, .widget a.button.checkout {
    background-color: #a80021;
    border-color: #a80021;
    color: #ffffff;
}

.storefront-primary-navigation {
  background-color: transparent; }

.posted-on,
.byline {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .7em; }

.hentry .entry-header {
  border-bottom-width: 0;
  margin: 0 0 3.631em; }
  
  
.widget h3.widget-title,
.widget h2.widgettitle {
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  font-style: italic;
  font-weight: 400; }

.hentry .entry-header h1 {
  border-bottom: 4px double rgba(0, 0, 0, 0.1);
  padding-bottom: .618em; }

.col-full,
.header-widget-region {
  box-sizing: content-box; }

.header-widget-region {
  margin: 0; }
.header-widget-region .col-full {
    background: #fff;
    padding: 0 1em; }
.header-widget-region .widget {
    padding-top: 2.244em; }
    
    
.woa-top-bar .block .widget {
    font-size: 18px;
    letter-spacing: 2px;
}

.site-content .col-full {
  background: #fff;
  padding: 1.618em;
  box-shadow: inset 0 0 0 .53em #f6f6f6; }

.site-footer {
  padding: 0; }
  
.site-footer {
    background-color: transparent;
    color: #777777;
}
  
.site-footer .col-full {
    background: #d3d3d3;
    padding: 1.618em; }
    
.site-info {
    padding: .617924em 0;
}

.woocommerce-breadcrumb {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent !important; }

.site-header-cart {
  margin-bottom: 0; }

/*
ul.products li.product {
  overflow: visible; }
  ul.products li.product .price {
    position: absolute;
    top: .618em;
    right: 1px;
    padding: .53em .857em;
    background: #555;
    color: #fff;
    font-weight: 700;
    box-shadow: 5px 0 0 0 #555; }
    ul.products li.product .price:after {
      content: "";
      display: block;
      position: absolute;
      right: -5px;
      top: 100%;
      border: 5px solid transparent;
      border-top-color: #222222;
      border-left-width: 0; }
    ul.products li.product .price del {
      font-weight: 400;
      opacity: 0.5; }
  ul.products li.product .onsale {
    display: none; }
  ul.products li.product img {
    border: 1px solid rgba(0, 0, 0, 0.1); }
*/ 

.single-product .images img {
  border: 1px solid rgba(0, 0, 0, 0.1); }

table.cart td.actions {
  border: 0;
  padding-top: 1.618em; }

.widget_product_categories ul li:before,
.widget_categories ul li:before {
  content: "\f07b" !important; }

.widget_product_categories ul li.current-cat:before,
.widget_categories ul li.current-cat:before {
  content: "\f07c" !important; }

.widget_recent_comments ul li:before {
  content: "\f075" !important; }

.widget_archive ul li:before {
  content: "\f07c" !important; }

.widget_recent_entries ul li:before, .widget_pages ul li:before {
  content: "\f15c" !important; }

.page-template-template-homepage .site-main {
  padding-top: 0; }
  .page-template-template-homepage .site-main > .type-page:first-child {
    width: auto !important;
    margin-left: 0 !important; }
    .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header {
      margin-left: auto;
      margin-right: auto; }
      .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header h1 {
        font-size: 2.618em; }
    .page-template-template-homepage .site-main > .type-page:first-child .col-full {
      padding: 0;
      background: none;
      box-shadow: none; }

.content-area,
.widget-area {
  margin-bottom: 0; }

.woocommerce-checkout.scc-distraction-free-checkout .boutique-primary-navigation {
  display: none; }

.woocommerce-checkout.scc-distraction-free-checkout .site-header {
  margin-bottom: 0; }

.sph-hero .col-full {
  background: transparent;
  box-shadow: none; }

@media screen and (min-width: 768px) {
  .col-full {
        padding: 0 5.874em; }
  .boutique-primary-navigation {
    border-top-left-radius: 0.327em;
    border-top-right-radius: 0.327em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -0.53em rgba(0, 0, 0, 0.05);
    background: #212121;
    clear: both; }
    
  .storefront-primary-navigation {
    clear: both;
    background: rgba(0,0,0,.06);
        background-color: rgba(0, 0, 0, 0.06);
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-clip: border-box;
        background-origin: padding-box;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    margin-left: -99em;
    margin-right: -99em;
    padding-left: 107em;
    padding-right: 107em;
} 

  .site-branding,
  .site-search,
  .site-header-cart,
  .site-logo-anchor,
  .custom-logo-link {
    margin-bottom: 4.236em; }
  .site-header {
    padding-top: 19em; }
  .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,
  .site-header-cart .cart-contents {
    padding-bottom: 0.2em !important;
    padding-top: 0.418em; }
  .site-content .col-full,
  .site-footer .col-full,
  .header-widget-region .col-full {
    padding: 0em 6.2em; }
  .header-widget-region .col-full {
    padding-top: 0;
    padding-bottom: 0; }
  .site-footer .col-full {
    padding: 2.618em 6.2em;
}
  .main-navigation ul.menu li.current-menu-item > a {
    position: relative; }
  .main-navigation ul.menu li.current-menu-item > a:before {
      content: none !important;
      display: block;
      position: absolute;
      top: 100%;
      left: 50%;
      border: .618em solid transparent;
      border-top-color: #212121;
      margin-left: -.618em; }
  .main-navigation ul.menu ul,
  .main-navigation ul.nav-menu ul {
    background: #212121; }
  .main-navigation .smm-mega-menu {
    margin-left: 0;
    margin-right: 0;
    padding: 4.236em 5.874em;
    background-color: #212121 !important; }
  .main-navigation .smm-mega-menu ul {
      background-color: transparent !important; }
  .sd-sticky-navigation .main-navigation .smm-mega-menu {
    margin-left: -5.874em;
    margin-right: -5.874em; }
  .page-template-template-homepage-php .content-area {
    width: 73.9130434783%;
    float: left;
    margin-right: 4.347826087%; }
    .page-template-template-homepage-php .content-area .columns-3 ul.products li.product {
      width: 29.4117647059%;
      float: left;
      margin-right: 5.8823529412%; }
  .page-template-template-homepage-php .boutique-featured-products .storefront-product-section {
    margin-left: -5.874em;
    margin-right: -5.874em;
    padding: 0 5.874em;
    background: rgba(0, 0, 0, 0.025);
    padding-top: 3.632em;
    padding-bottom: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 0 0.53em rgba(0, 0, 0, 0.025); }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product span,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .button,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .star-rating {
      display: none; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
      display: block;
      position: absolute; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3 {
      top: 0;
      left: 0;
      z-index: 99;
      -webkit-transition: all ease .2s;
      transition: all ease .2s;
      color: #f6f6f6;
      opacity: 0;
      width: 100%;
      text-align: left;
      padding: 1.618em;
      color: #303030;
      opacity: 0; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
      bottom: 0;
      right: 0;
      top: auto;
      z-index: 99; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price span {
        display: block; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product img {
      margin: 0; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a {
      display: block; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #fff;
        opacity: 0;
        -webkit-transition: all ease .2s;
        transition: all ease .2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:before {
        content: "";
        display: block;
        position: absolute;
        top: .618em;
        left: .618em;
        right: .618em;
        bottom: .618em;
        border: 4px double rgba(0, 0, 0, 0.1);
        z-index: 9;
        opacity: 0;
        -webkit-transition: all ease .2s;
        transition: all ease .2s; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover h3, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:after, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:before {
        opacity: 1; 
}
  .page-template-template-homepage-php .boutique-featured-products .hentry {
    padding-bottom: 0;
    border-bottom: 0; }
  .page-template-template-homepage-php .boutique-featured-products .entry-header h1 {
    text-align: center; }
  .page-template-template-homepage .content-area .sph-hero,
  .page-template-template-homepage .content-area .sprh-hero {
    margin-top: 0 !important; }
    .page-template-template-homepage .content-area .sph-hero.full,
    .page-template-template-homepage .content-area .sprh-hero.full {
      margin-left: 0 !important;
      margin-right: 0 !important; }
  .page-template-template-homepage .boutique-featured-products .sph-hero.full,
  .page-template-template-homepage .boutique-featured-products .sprh-hero.full {
    margin-left: -5.874em;
    margin-right: -5.874em; }
  .page-template-template-homepage.left-sidebar .content-area {
    width: 73.9130434783%;
    float: right;
    margin-right: 0; }
  .page-template-template-homepage.left-sidebar .widget-area {
    width: 21.7391304348%;
    float: left;
    margin-right: 4.347826087%; }
  .sph-hero .col-full,
  .sprh-hero .col-full {
    background-color: transparent;
    padding: 0; }
  .sph-hero h1,
  .sprh-hero h1 {
    font-weight: 400; }
  .site-main .sph-hero .overlay,
  .site-main .sprh-hero .overlay {
    padding: 4.236em; } }

@media screen and (max-width: 768px) {
  .col-full {
    padding: 0 1em;
    margin: 0 1em;
     }
 
  .boutique-featured-products .sph-hero.full,
  .boutique-featured-products .sprh-hero.full {
    margin-left: -1em;
    margin-right: -1em; }
  .boutique-featured-products .storefront-product-section,
  .boutique-primary-navigation {
    margin-left: -1em;
    margin-right: -1em;
    }
  .boutique-primary-navigation {
    padding-top: 0;
     }
  .boutique-primary-navigation button.menu-toggle {
      margin-top: 0; }
  .site-content .col-full,
  .site-footer .col-full {
    padding-left: 1em;
    padding-right: 1em; } }
    
    /*margin at bottom of footer widget area */

#footer-widgets {

margin-bottom: 0px ! important;

}

I have tweaked alot of padding and margins, mostly to make the site-header the same width as the page column. Sorry site is not live or I would show you.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How Do I Create Responsive Header for Handheld Media?’ is closed to new replies.

Tags