Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 9, 2023 at 3:17 pm #1410075
    biggsuccess

    I closed an other topic on this, this but I’ve just noticed a couple other CSS issues I’m noticing on another landing page I’ve created using Aweber/ Enfold.

    The links are below. The font is smaller when linked to enfold and the darkened overlay cuts off at the opt-in button. Do you have some suggestions for these two issues?

    Thank you!

    • This topic was modified 1 year, 5 months ago by biggsuccess.
    June 10, 2023 at 8:47 pm #1410179
    Mike

    Hey biggsuccess,
    Thanks but I think that you linked to the Aweber success page and not the landing page.
    Nonetheless to make the text larger try some css like this and adjust to suit:

    .awpage-text-element,.awpage-signup-form__field-label {
	font-size: 24px;
}

    Best regards,
    Mike

    June 10, 2023 at 10:01 pm #1410187
    biggsuccess

    Hi Mike – the first link was to a success page by accident. But the other 2 are to landing pages where the overlay cuts off. I’ve pasted them below.

    Thank you for the font CSS

    June 10, 2023 at 10:37 pm #1410192
    Mike

    Hi,
    Can you link to the original so we can compare.
    Are you refuring to a desktop view? When I check the form and the overlay are correct, the only issue is that the overlay scrolls up, I would recommend changing/darkening the image so the overlay won’t scroll up or make the page not scroll at all.
    But perhaps seeing the original will help with a new idea.
    Please see the screenshot in the Private Content area of what I see.

    Best regards,
    Mike

    June 10, 2023 at 11:19 pm #1410195
    biggsuccess

    Hi Mike – I’ve got the link to the original below, and a screenshot of what I’m seeing.

    On the original, created in aweber, the settings are:
    background image with opacity set at 35%.

    But once I link that Aweber page to Enfold, the opacity seems to scroll with the page? I’ve included a link to a screenshot of what I see.

    June 11, 2023 at 3:34 pm #1410233
    Mike

    Hi,
    Thanks, try adding this css:

    .awpage-document {
    height: 150vh !important;
}

    Best regards,
    Mike

    June 12, 2023 at 2:44 pm #1410347
    biggsuccess

    I think we are getting closer. That CSS did not work, however, I remembered from my other thread Nikko saying to set the page to default template (instead of Aweber Page) under Page attributes on Edit Page.

    I’ve just done that and that takes care of the overlay scrolling up issue.

    However, this makes the forms submit button disappear, leaving only the text of the button.

    Is there some CSS to make the form button show again?

    June 12, 2023 at 6:49 pm #1410370
    Mike

    Hi,
    That doesn’t work when I check, the overlay is only around the text and the page is not scrolling, see the screenshot in the Private Content area.
    Try undoing this change and adding the css I posted to WordPress ▸ Customize ▸ Additional CSS
    Then clear your browser cache and any cache plugin, and check.
    Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
    If this doesn’t help please include an admin login in the Private Content area so we can check.

    Best regards,
    Mike

    June 13, 2023 at 7:39 pm #1410499
    biggsuccess

    Hi Mike thanks for continuing to help me with this…

    I followed your instructions and which made it better. That brings the overlay down to the bottom of the logo – so that’s an improvement though I’d like the overlay to take up the full background as it does in the Aweber page that is not linked to Enfold. Is that possible?

    Also – the mobile view of the page i has the overlay cutting off at just above the form button.

    June 14, 2023 at 12:08 am #1410516
    Mike

    Hi,
    When I check now the overylay covers the whole screen even when I scroll, if it is not for you try changing the number higher like:

    .awpage-document {
    height: 250vh !important;
}

    or higher.

    Best regards,
    Mike

    June 14, 2023 at 1:54 am #1410534
    biggsuccess

    Perfect – making the number higher took care of it on my end. I really appreciate you, Mike!

    June 14, 2023 at 3:12 am #1410536
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Aweber Landing Page CSS’ is closed to new replies.