Not fully responsive

  • Developer claims this to be mobile responsive, but it is not fully responsive. The main header image (the showcase of the site) does not resize according to browser size and is not retina ready for Apple products. They say in their support that it’s simply not possible. Luckily for me I am a hand-coder and have been able to add this functionality via CSS myself. What a PITA. Do NOT get this template if mobile is important to you unless you feel like tackling that part by coding it yourself.

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

  • Hi @jem3299,

    Thank you for getting in touch with us and reporting this. We will do our best to fix the responsive issues you mentioned in future updates.

    Best regards,
    Rodica

    Hi Jem3299 and Rodica,

    Are you willing to share the changes to the theme? I’m facing the same issues with mobile devices.

    Thanks!

    Thread Starter jem3299

    (@jem3299)

    I just added in several breakpoints using @media and had them point to different bg images for each size browser. Many of these are for specific devices the client wanted me to target. So you’ll probably have to tweak it a bit for your own situation.

    In your child theme in styles.css, I added this to the bottom. Hope it helps ??

    @media screen and (max-width: 1366px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 769px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header1300.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 1280px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 666px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header1200.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

 /*Windows Surface Pro*/
@media only screen and (max-width: 1080px) and (orientation : portrait) {
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 551px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header992.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 992px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 551px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header992.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 768px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 427px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header768.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 600px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 334px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header600.jpg')!important;}
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 480px){
.chronosly-closure {margin-top: 1px!important;}
div.home-header-wrap {height: 230px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header480.jpg')!important;}
.rb_logo {display:none!important;}
.navbar-brand {width: 225px!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

/**  iphone 6 **/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { .chronosly-closure {margin-top: 1px!important;}
div.home-header-wrap {height: 294px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/04/header-imge-1x2.jpg')!important;background-size: 100% auto!important;}
.rb_logo {display:none!important;}
.navbar-brand {width: 225px!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 320px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 178px!important; }
.navbar-brand {width: 175px!important;}
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header320.jpg')!important;}
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}
    Thread Starter jem3299

    (@jem3299)

    Oh, one more thing. You probably should try to use one image and resize that for each. My client didn’t like the way hers resized and wanted different variations of the image instead.

    Thanks a lot for your detailled information!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Not fully responsive’ is closed to new replies.