Call-to-action image not displaying on mobile

Hey!

Yeah, if possible, it would be helpful if you can place it back so I can see what’s happening. Let me know when it’s back up and I’ll take a look!

Thanks,
Kevin

Hello again Kevin, thanks for another assist!

It’s up now.

Hey,
You can add this css:

@media (max-width: 768px){
    .kt-home-call-to-action {
    background-attachment: scroll;
}
}

Mobile browsers don’t handle background attachment fixed well yet.

Ben
Kadence Themes

Hi Ben,

Thanks, but no change! I’ve added the CSS in theme options > custom CSS. Image still just shows as a grey box on my iPhone.

Danny

Hey Danny,
I’m not seeing the css in your code. Did you remove it? Have you tried clearing your cache?

Hannah

Hey Hannah,

The CSS is still present. How odd. I did clear my cache and I’ve just done it again.

To clarify, I’ve added the CSS in the Pinnacle theme options as opposed to the WordPress CSS section– I’m assuming this is the right place for it.

Danny

That’s the correct place. What else is in your css? It’s possible something has not been closed properly and is affecting css added after it. To test paste the code at the top of custom css box. Does that change anything?

Hannah

@media (max-width: 768px){
    .kt-home-call-to-action {
    background-attachment: scroll !important;
}
}

You can try changing the css to above ^

Ben
Kadence Themes

Hey guys, the new code did it, thanks.

So my custom CSS in total is now:
.container {
width: 100%;
}

h3 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

h4 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

h5 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

h6 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.single-post {
background: #FCF6F4;
}

.post {
background: #FCF6F4;
}

body { background:#FCF6F4;}

.rowtight, .row {
margin: 0;
}

body.home #content .main, .container {
padding: 0;
overflow-x: hidden;
}

@media (max-width: 768px) {
p,h1, h2, h3, h4, h5 {
max-width: 90%;
}
}

.rowtight, .row {
margin: 0;
}
body.home #content .main, .container {
padding: 0;
overflow-x: hidden;
}
body.page #content .main .pageclass {
padding: 0;
}
@media (max-width: 768px){
p,h1, h2, h3, h4, h5 {
max-width: 90%;
}
}
.headerclass > .container {
overflow-x: visible;
}

img {
padding:-10px;
margin:-10px;
}
@media (max-width: 768px){
.kt-home-call-to-action {
background-attachment: scroll !important;
}
}