skip to Main Content

I have a landing page that I’m creating in Elegant Themes’ Divi theme. Here’s the link to it. The optin form is mostly responsive. Except, when viewing the form on a smart phone or tablet, the h2 that says “Join today!” is left adjusted when I’d actually like it to be in the center of the screen.

How can I change the h2 using CSS to center it above the optin form when viewing the page on a smart phone or table. I tried to fix the issue for the smart phone view with the following:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) .et_pb_newsletter { h2 {
text-align: center;
align: center;
}
}

But, it’s not having the desired effect. I would greatly appreciate any help you can provide. Thank you so much!

2

Answers


  1. Inside of .et_pb_newsletter_description you have float set to left. Set it to none or remove the float entirely. You should be able to do this inside of custom css.

    Login or Signup to reply.
  2. Try this

    position: relative; top: 50%; transform: translateY(-50%);

    If this is not working at least you can put the <h2> tag inside a <center> tag.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search