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
mel200Asked:
Who is Participating?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mel200Author 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
 
NerdsOfTechTechnology ScientistCommented:
Why not make the pop-up fullscreen or percentage-based to eliminate overflow?
0
 
mel200Author 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
 
mel200Author Commented:
ok, sorry, I thought you could see it with developer tools on chrome. I'll find it. thanks.
0
 
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
 
mel200Author Commented:
The Css you gave was perfect, thanks so much!!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.