Responsiveness broken on mobile for Under Construction page

Support
#1

Hey there,

I don’t know if there was an update or what happened (as we didn’t change anything about that particular page or things that should affect that part of the website) but instead of the Under construction page adapting to small screens, it now doesn’t fit on the screen on mobiles. Is there a workaround for this problem? What changed?

Thank you for your help!

#2

Hi There,

Thanks for writing in!

Please add this css to your custom css (Dash board -> x -> launch -> Options -> leftside you will find the CSS)

@media (min-width: 768px) {
.tco-under-construction h1 {
  font-size: 16px;
}
.tco-under-construction img {
max-width: 300px;
}
}

and let us know how it goes.

Thanks

#3

Hey @basanta
Thank you for the quick reply. Unfortunately this didn’t help. I tried clearing my own cache and cloudflare’s but no luck.

It was working fine just a couple days ago - any idea what might have changed? Thank you!

#4

Hello There,

Please use this code instead:

@media (max-width: 768px) {
 .tco-under-construction h1 {
  font-size: 12px;
 }

 .tco-under-construction h2 {
   font-size: 14px;
 }

 .tco-under-construction img {
  max-width: 200px;
 }
}

Clear your caches and test your site again.

#5

It’s looking somewhat better but still not back to normal (the screenshot was taken on a Huawei mate 10 pro but we have the same issue on iphones etc, anything below 440px)

I’d like to mention again that this page looked good a couple days ago and wasn’t modified between that time and breaking.

#6

Hi there,

Please consider that whatever you add to the Under Construction plugin will show on the front end and it does not have any specific responsive CSS.

I am not sure what might cause changes in a code which you had there but whatever you add it will show and the theme does not have any control of it.

Please kindly give us information to be able to help how you want to lay out that logo in mobile and we will try to suggest you proper CSS code.

Thank you.

#8

Hey Christopher,

Thanks for the reply. I now see that apparently you can’t look at the mobile screenshot in its full size?

I’d like the site to look the same at 320px and 375px as other breakpoints (actually even 425 chips off a bit of the padding!) - logo laid out, heading, subheading with some padding around so the text doesn’t run off the screen and the content is centered both vertically and horizontally.

I just attempted adding a line break tag with a class to the heading that I’d hide on larger screens but the field wouldn’t take it. When I said no modification made, I meant no changes were made to the global CSS. Since it worked a week ago, I’m guessing either the UC plugin or Pro handles the responsive part and something changed.

Thanks,

(I accidentally deleted my previous reply)

#9

I fixed this by adding a bit for css changing the padding size under 425px. Still don’t know why it broke in the first place though.

#10

Glad it’s okay now, how much padding did you add? Adding fix value isn’t responsive. Thanks!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.