Need some CSS to make a pop-up smaller only on mobile

Hi, on site truenasreseller dot com, I need to make the pop-up that shows up on the home page (asking for email, etc) smaller on mobile phones.

I can add some custom CSS to the plugin, but was hoping for some help on that score. Can you advise on custom CSS that would make the pop-up smaller but still readable? Thanks.
screenshot2.jpg
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can you be a bit more descriptive when you say smaller - what is wrong with it as it stands?
0
NerdsOfTechTechnology ScientistCommented:
For the responsive @media CSS rule for the mobile resolution that you have set, you will need to change the dimension you wish to reduce to a smaller percentage (width or height or both).
0
Melody ScottAuthor Commented:
It fills the page to such a degree that on some screen sizes it's hard to scroll up to hit the X.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

NerdsOfTechTechnology ScientistCommented:
Why not make the pop-up fullscreen or percentage-based to eliminate overflow?
0
Melody ScottAuthor Commented:
nerdsoftech, good idea, how can I do that? I would make it percentage based, maybe try 70% across all screens.
0
NerdsOfTechTechnology ScientistCommented:
You would alter the class' CSS that is in charge of the pop up. For us to help we would have to see the CSS code you have (post it as a "code" block here)
0
Melody ScottAuthor Commented:
ok, sorry, I thought you could see it with developer tools on chrome. I'll find it. thanks.
0
Julian HansenCommented:
It seems to me the issue is that the "Call a specialist today" bar at the top is obscuring the close (on all views)

So something like this might be in order
.cc-pop-up__article {
   margin-top: 50px;
}

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NerdsOfTechTechnology ScientistCommented:
Sorry, I now see the URL in the .jpg and description. Julian is correct, you will need to lower the position of the pop up to avoid the "top-header" call a specialist today (or leave the pop-up as is but make the "top-header" invisible in mobile)
0
Melody ScottAuthor Commented:
The Css you gave was perfect, thanks so much!!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.