Docs

[logoglo]

Hi there, I was given some code to prevent ipad parallax zooming…that worked, but I checked on the mobile phone, and its still zooming, could you check it out please:

http://486.408.myftpupload.com/

[Friech]

Hi There,

Thanks for writing in! Is this the code that you’re referring to?

.touchevents .x-content-band.parallax {
   background-attachment: scroll !important;
}

If so, please update that to:

   .touchevents .x-content-band.bg-image.parallax,
   .touchevents .x-content-band.bg-pattern.parallax {
   		background-attachment: scroll !important;
   		background-size: 100% 100%;
   }

There is another issue, it seems your whole custom css is wrap inside @media (min-width:767px) block? Please add the closing bracket where that @media block should end.

Hope it helps, Cheers!

[logoglo]

Sorry to sounds a bit dumb, but how would I do that? here is the entire code:

@media (min-width:767px){
.my-class{
width: 11% !important;
padding:0 !important;
}
.my-class img{
margin:0 !important;
padding:0 !important;
}
.x-colophon.bottom .x-social-global a {
font-size: 3rem;
height: 0px;
line-height: 0px;
width: 40px;
}
.x-colophon.bottom .x-colophon-content {
margin: 00px 0;
}
.custom-link1 {
color: #fff !important;
text-decoration: none !important;
}
.custom-link1:hover {
color: #16d157 !important;
text-decoration: none !important;
}
.x-colophon.top {
padding-top: 30px;
padding-bottom: 30px
}
.widget_search .search-query {
font-size: .7em;
}
.wpcf7-form p {
color:#fff;
width:85%;
}
.content-band-width-70 {
max-width: 50%;
float: left;
}
.wpcf7-form p {
margin: 0 auto;
padding-bottom: 5px;
}
.touchevents .x-content-band.bg-image.parallax,
.touchevents .x-content-band.bg-pattern.parallax {
background-attachment: scroll !important;
background-size: 100% 100%;
}
table th, table td {
border: none;
}
.page-id-348 td {
padding: 0 !important;
}

[logoglo]

Also, it doesnt seam to have worked, can you take a look on a mobile please, another issue is the contact form titles are in black on the mobile, but white everywhere else…ipad, desktop etc.

[Rue Nel]

Hello There,

Please take a look at your custom css code. You are using this very first line:

@media (min-width:767px){

Please make sure which of your custom css block will be inside the @media statement. If you are not sure, you can remove this line because it affects your other custom css. And to make sure that our suggested code will work, you must place this code at the very end of your other custom css code:

@media(max-width: 768px){
   .touchevents .x-content-band.bg-image.parallax,
   .touchevents .x-content-band.bg-pattern.parallax {
   		background-attachment: scroll !important;
   		background-size: 100% 100%;
   }
}

Hope this helps.

[logoglo]

That worked, thanks! but now my page is loading very slowly, im not sure if its a server error, or the code? this is the code I have now:

.my-class{
width: 11% !important;
padding:0 !important;
}
.my-class img{
margin:0 !important;
padding:0 !important;
}
.x-colophon.bottom .x-social-global a {
font-size: 3rem;
height: 0px;
line-height: 0px;
width: 40px;
}
.x-colophon.bottom .x-colophon-content {
margin: 00px 0;
}
.custom-link1 {
color: #fff !important;
text-decoration: none !important;
}
.custom-link1:hover {
color: #16d157 !important;
text-decoration: none !important;
}
.x-colophon.top {
padding-top: 30px;
padding-bottom: 30px
}
.widget_search .search-query {
font-size: .7em;
}
.wpcf7-form p {
color:#fff;
width:85%;
}
.content-band-width-70 {
max-width: 50%;
float: left;
}
.wpcf7-form p {
margin: 0 auto;
padding-bottom: 5px;
}
table th, table td {
border: none;
}
.page-id-348 td {
padding: 0 !important;
}
@media(max-width: 768px){
.touchevents .x-content-band.bg-image.parallax,
.touchevents .x-content-band.bg-pattern.parallax {
background-attachment: scroll !important;
background-size: 100% 100%;
}
}

[Lely]

Hi There,

Custom CSS shouldn’t affect loading of the page that much. Please check this article to improve site performance:https://community.theme.co/kb/performance/

Hope this helps.

[logoglo]

I checked with godaddy and it was a fault on their end. The code is perfect, thanks for all your help.

[Friech]

We’re delighted to assist you with this.

Cheers!

[logoglo]

Hey, I just checked on my ipad, and it seams the zooming is still happening, can you please check.

Thanks.

[logoglo]

That said, it works ok on and iphone, but not on an ipad.

[Jack]

Hi there,

Thanks for writing back!

That’s because the iPad screen size is larger, try updating the code to:

@media(max-width: 1024px){
   .touchevents .x-content-band.bg-image.parallax,
   .touchevents .x-content-band.bg-pattern.parallax {
   		background-attachment: scroll !important;
   		background-size: 100% 100%;
   }
}

Thank you!

[logoglo]

That worked, thanks!

[Rad]

You’re welcome!

[logoglo]

So I added this to my other site: http://www.logoglo.com/affordable-logo-design-graphic-design-2/

And the top parallax image is getting squashed on mobile devices, am I doing anything wrong?

[Author]

Posts