Stumped

Getting a 404 on that link

Wow, my server got wiped. ALL the files are gone… Working on restoring.

Ok that was a nightmare. I have it back up and running BUT with a new link location.

NEW SITE LINK

Thanks for your patience.

Parallax looking good!

Not sure I understand what you need. I guess it’s Inspect is showing:

element {
    background-image: url("https://youneedthissite.net/questasmasonry/wp-content/uploads/2015/11/Yard-12.jpg");
    background-size: auto 1250px;
    background-repeat: no-repeat;
    min-height: 750px;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 0px none;
    border-right: 0px none;
    background-attachment: fixed;
    background-position: -645.536px 217.534px;
}

As you’re using a page builder, try this:
#pg-754-1.panel-grid .ppb-row {}

I am trying to kill the BG image “yard12.jpg” while keeping the text.
I am trying to do this for mobile devices as the parallax isn’t responsive.

Those I have tried those and did try again. The 2nd snippet kills the entire row (image and text), the 1st doesn’t do anything. I have tried different combinations, still can’t kill the BG.

I added the following classes to the rows and column and text:

row class – killbackground
column class – keeptext
css class in text editor – keepthistext

I have figured it out, here is the solution I came up with. I haven’t applied it to @media yet and have to deal with the text spacing to the top, BUT I managed to hide the BG and keep the text. I will show the solution for anyone else that might want to use Pootle Page Builder with CZR. (Using the classes listed in my previous post)

.killbackground {
visibility: hidden;
}
.keeptext {
visibility: visible;
}

Finally for those following this thread. SOLVED using the following CSS.

@media (max-width: 767px){
.killbackground {
visibility: hidden;
margin-bottom: -150px; /* over-ride margin */
}}
@media (max-width: 767px){
.keeptext {
visibility: visible;
}}
@media (max-width: 767px){
.keeptext {
position: relative;
top: 0px !important;
}}

/* original setting for parallax */
.keeptext {
position: relative;
top: 280px;
}