Black space with mobile device

  • scabtik

    (@scabtik)


    8 years, 5 months ago

    Hey guys, got a question regarding my new website.
    I got the logo to resize/ replace while keeping it at a nice size when you’re on a mobile device. 

    
.header-wrap .col-sm-4{
  display: none;
}

.site-header.float-header {
  background-color: transparent;
}

.site-logo {
    max-height: 500px;
}

img {
    max-width: 280%;
    height: auto;
	margin-left: -500px;
 	margin-top: 225px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

@media screen and (max-width: 760px) {.site-logo {width:100%;}
} 

@media screen and (max-width: 760px) {.site-logo {margin-left: -0px;}
} 

@media screen and (max-width: 760px) {.site-logo {margin-top: 0px;}

    But when i open the site on a mobile phone, there is a black box around my logo, i want it to be in the background, just like the desktop version. Can someone assist me in this? (I’m using the sydney theme btw)

Viewing 10 replies - 1 through 10 (of 10 total)
  • guru985

    (@guru985)

    8 years, 5 months ago

    Please suggest the your website url.

    Thread Starter scabtik

    (@scabtik)

    8 years, 5 months ago

    Oops, excuse me.
    the website is http://www.scabtik.com

    ThemesGrove

    (@themesgrove)

    8 years, 5 months ago

    Hello,
    You have to positioning you logo for you mobile device. You can make a try with below code. 

    
@media(max-width:768px){
.site-header .col-md-4, .site-header .col-md-8 {
    min-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
}

    Let me know if it works.

    Thanks.

    Thread Starter scabtik

    (@scabtik)

    8 years, 5 months ago

    Thanks for helping out.

    I applied the code, there is still a small black box, if i change the top: 0 to top: 1, the logo is now nice in the background. (Check the website again)

    Any way of getting rid of the last piece of black box?

    ThemesGrove

    (@themesgrove)

    8 years, 5 months ago

    Hello,
    Its comes from body. Black is the body default background color.
    That why where it takes transparent image , there black peeps out.
    thanks.

    Thread Starter scabtik

    (@scabtik)

    8 years, 5 months ago

    Okay i see, is there a way i can write code, like you explained before, when i’m visiting the site with a device, the entire website is shifted a amount pixels up, so you can’t see the black bar?

    ThemesGrove

    (@themesgrove)

    8 years, 5 months ago

    Hello,

    Yes, You can write css in the theme appearance > customizer . There is option to put CSS. You can place my code there and test your site in mobile device.

    Thanks

    guru985

    (@guru985)

    8 years, 5 months ago

    Hello Scabtik,

    Go to your stylesheet and find this code.

    .site-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 20px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

    Remove this padding property {padding: 20px 0;} or you can also change in 0px in place of 20px

    Like this:-
    padding: 0px;

    I hope it will solve your problem. And let me know if there issue.
    Thanks,

    Thread Starter scabtik

    (@scabtik)

    8 years, 5 months ago

    Thanks Guru, it worked!

    Got one last question, sorry i’m still trying to learn the codes.

    When you visit the mobile page, between the social media links and the spotify/youtube screens is a much bigger gap, how can i make this gap smaller?

    Thanks in advance!

    guru985

    (@guru985)

    8 years, 5 months ago

    Hello Scabtik,

    Go to your stylesheet and write this code.

    .panel-row-style.panel-row-style-for-220-0 {
    padding: 100px 0 0 0 !important;
    }

    I hope it will solve your problem. And let me know if there issue.
    Thanks,

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

The topic ‘Black space with mobile device’ is closed to new replies.