the art theme – mobile header

[Courtney Cline]

can you please help me change the color of the mobile header? it is currently displaying black, which does not allow my logo to be seen.

i tried this code:
@media screen and (max-width:767px) {
.home .header {
background-color: rgba(244,243,243) !important;
}
}

but, clearly, i’m doing something wrong.

thanks!

[Courtney Cline]

two other things have come up with this theme now…

one – the slider isn’t working correctly on a mobile device. the slant of the image shows up for a split second and then flashes into a straight line. not only does it look like a glitch, it covers up the top part of the next section’s heading. please help.

two – the testimonial font when viewing it on a mobile device seems unnecessarily large. how can i adjust it just for the mobile view?

my website is https://www.designbycline.com

thanks!

[Courtney Cline]

i solved the very first problem with

@media screen and (max-width:767px) {
.home.has_trans_header .header {
background: #f4f3f3 !important;
}
}

[Courtney Cline]

okay – i also told it to display none for the slider @media screen and (max-width:767px)

so the only thing i haven’t been able to figure out is the testimonial text size on the mobile device. can you please help with that?

[Courtney Cline]

well, i guess hiding the slider wasn’t the solution I was looking for because it’s still not carrying over the angle at the bottom of the header, so it’s still covering up the top part of the next section’s heading…but at least it’s not glitching. what’s weird is that if shrink my browser on my computer to mobile size the slider/header issue does not exist. it’s only when i view it on my iphone. do you think it’s browser related, because i have to use safari as my browser on my phone rather than mozilla?

sorry for all the messages

[Sonl Sinha]

Hi Courtney,

Can you send us screenshots? Upload your screenshot on imgur.com and paste the share URL here.

Regards,
Dave

[Courtney Cline]

here you can see the header line i’m talking about. when it’s straight, instead of slanted, on a mobile device, it cuts off part of the next section’s header.

http://imgur.com/a/BajbL

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Customize>>Scroll down to find Custom CSS and paste there:

.footercols4, .footercols3, .footercols2, .footercols1 { box-sizing:border-box;}

Regards,
Shri

[Courtney Cline]

was this suppose to fix my header problem on mobile devices? it did not.

[Courtney Cline]

do you have a solution for my header issue yet? it’s still displaying as shown in the screenshots included previously.

[Sonl Sinha]

Hi

Kindly go to Appearance>Customize>Scroll down to left bottom to find Custom CSS

and paste there:

@media screen and (max-width:479px) {
.head-info-area .left, .head-info-area .right { text-align:center;}
.head-info-area a { display:block; margin-left:0; text-align:center;}
}

Regards,
Dave

[Courtney Cline]

that didn’t fix it either. i couldn’t ever get the slant to appear like it should, but i did finally get the Services title to stop being cut off by the header by adding

@media screen and (max-width:479px) {
.logo img {
margin-bottom: 0px;}
.featured_area {
padding: 80px 0;}
}

[Author]

Posts