Docs

[Eric]

Hey one last question. On my get in touch page, I have a background image that looks great on desktop and mobile, however on the tablet, the image only covers about half the screen (as you can see in screenshot 1). What I was wondering is if it’s possible to add some CSS that would make the background image full screen on tablet only. I saw a couple of threads within the forum and from what I saw it seems to be possible, however none of those codes worked on my hand.

Please let me know and thanks again for all your help.

[Eric]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.page-id-151 div#x-section-1 {
    height: 63vh;
}

Hope that helps.

[Eric]

Hey sorry I put in the code but it made no difference. Any other ideas?

Thanks for the response

[Nabeel A]

Hi again,

Please replace the previous code with the following code:

@media (min-width: 768px) and (max-width: 1024px) {
    .page-id-151 #x-section-1 {
        height: 72vh !important;
    }
}

Let us know how this goes!

[Eric]

Hey thanks for the reply. Unfortunately that didn’t work either though. In both cases the code doesn’t seem to be affecting the image on the tablet or on the desktop.

If you have any other ideas, please let me know.

And once again thanks for all your help!

[Friech]

Hi There,

You missed the the closing bracket of @media (max-width: 480px), please resolve that first.

Then add this on your custom CSS.

/* iPad only */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
 .page-id-151 #x-section-1 {
  	height: calc(100vh - 273px);
  }
}

Make sure to clear your browser’s cache before previewing the page.

Thanks.

[Author]

Posts