![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: clone, whitespace
-
AuthorPosts
-
July 15, 2022 at 4:20 pm #1358510
Hello, again!
We are attempting to finalize our site (https://conectadolaunch.wpcomstaging.com/landing/)and make it mobile friendly, but when we hide an element using the ‘Responsive’ tab or by using the CSS provided on this same topic the hidden element creates whitespace.
Is the best practice to clone an element, redesign it for mobile, and then hide the original on mobile (and the clone on desktop)?
We have added the following CSS code:
`/* Only display element on mobile */
@media only screen and (max-width: 768px) {
.only_desktop {
display: none !important; }
}/* Only display element on mobile */
@media only screen and (min-width: 769px) {
.only_mobile {
display: none !important; }
}-
This topic was modified 2 years, 1 month ago by
TippingPointSolutions.
July 15, 2022 at 5:02 pm #1358523Hey TippingPointSolutions,
It looks like the element that you are trying to hide is located in a Color Section? If that is the case, then please try to hide the whole section instead of the element located inside of it. You have preset option to hide Color Section element for certain screen widths in the element options.
Best regards,
RikardJuly 15, 2022 at 5:17 pm #1358525Thanks for the response!
It is actually just a Text Block with the “only_mobile” class, but after entering it into the Color Section that appears to have fixed the issue. Thank you!
July 15, 2022 at 8:01 pm #1358540Hi,
Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardJuly 18, 2022 at 5:52 pm #1358673Real quick, I am getting a block of white space above our contact form (below the last video). Would you be able to assist with that? It looks like our desktop elements are hidden and I don’t see any extra padding…
July 18, 2022 at 10:09 pm #1358703Hi,
Thanks for the update. It looks like there is padding applied to both the column with the let’s go text, and the actual form. Could you double check your settings there please? If you need further help, then please post admin WordPress login details in private.
Best regards,
RikardJuly 25, 2022 at 8:07 pm #1359407Hello!
Sorry for the slow response. It has been a crazy week here.
I checked the padding settings for the Color Section that the Text Block resides in. It has the ‘no padding’ option selected. I don’t see the padding options available in the form settings. I tried adding my own CSS under ‘General Styling’, but couldn’t get it to apply to it.
July 25, 2022 at 8:50 pm #1359415Hi,
Thanks for the update.
If you need further help, then please post admin WordPress login details in private.
Best regards,
RikardJuly 25, 2022 at 9:15 pm #1359416Attached the login info.
Thanks!
July 26, 2022 at 1:26 am #1359425Hi,
Thank you for the link to your site, the only padding or space that I see above your contact form is from the color section content class:.content { padding-top: 50px; padding-bottom: 50px;
This is from the color section for every element added, please try adjusting this for this one element if you need further help please let us know.
Best regards,
MikeJuly 26, 2022 at 3:14 pm #1359473Okay, excellent. Thank you very much! You may close the ticket.
July 26, 2022 at 5:37 pm #1359482Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
This topic was modified 2 years, 1 month ago by
-
AuthorPosts
- The topic ‘Hidden Element Creating Whitespace’ is closed to new replies.