Wordpress Site Media Breakpoint Issue

HTML-CSS
#1

Salutations!

I need assistance with resolving a media breakpoint issue. The page (sunnydublick[[.]]com/test-referrals-page) will not fire the breakpoint, regardless of my efforts.

Thank you in advance for your assistance.

Here’s a snippet from the page:

<div id="popmake-812" class="pum-container popmake theme-806 pum-responsive pum-responsive-medium responsive size-medium">
			<div class="pum-content popmake-content">
			<div class="lightbox-4">
<p style="text-align:right;font-size:large;padding-right:115px;"><strong>Be The First To Know.</strong></p>
<p style="padding-right:5px;padding-left:5px;padding-top:10px;margin-top:25px;margin-right:10px;border-radius:8px;max-width:45%;float:right;height:auto;background-color:rgba(255, 185, 98, 0.65);">Subscribe to our newsletter to get the latest from Sunny Dublick Marketing, keep up on essential industry news and get FREE resources to help build your brand.<br />
[CF]<br />
<label><br />
<input -type="text"/> <br />
<input type="checkbox" name="mc4wp-subscribe" value="1" /><br />
I agree to receive promotional materials from Sunny Dublick Marketing Inc.<br />
<input type="button" value="Sign Me Up!"/><br />
</label>
</p>
</div>
		</div>

The CSS is setup this way for the “lightbox-4” class:

.lightbox-4 {
width:100%;
height:550px;
background-color:yellow;}
@media only screen and (min-width: 800px) {
.lightbox4 {
background-image:url(/wp-content/uploads/2019/04/SunnyDublick_AbbyMurphyPhoto-17-edit.jpg);
background-repeat:no-repeat;background-position:center;}}
#2

Are you sure you want min-width? Try max-width too see what happens…

#3

Thank you, Rick but unfortunately it doesn’t change. Also, I have it set for min-width to keep the stylesheet “mobile first”.

Open to suggestions.

#4

Hi @Robehm

I added your css to the style sheet located in https://sunnydublick.com/wp-content/themes/alona-theme/assets/css/styles.css?ver=1.0

It works from there. Could it be you are adding your css code to a file that is not being loaded?

image
image1084×395 24.1 KB

image
image914×1011 438 KB

#5

Very interesting. I’ve been using the theme’s built-in custom CSS field for other edits (which seem to work). I’ll give that a go.

#6

@rickstewart

D’oh… I found it. Missed the hyphen in the code for the larger screens. But as you pointed out, it didn’t seem as if the style sheet I originally used was being loaded by the theme. All is well now.

Thanks a lot!

#7

I’m glad its working for you. You most probably know this, but I’ll say it anyway. With WordPress there is a standard css file you almost always use called style.css, and it is located in the root of the child theme 's folder, or if you are not using a child theme then it is in the root of the theme folder. It is always there, along with one other file that must always be present, functions.php. Most people place their css there, and if you work on someone elses website, you generally look for the css there…

#8