Call to Action Image

I tried to change my Call to Action image and make it look centered across all platforms but I cannot figure it out - fixed, centered, parallax, etc., etc. - not even sure if I am to edit this section via the ‘edit row’ option or by clicking ‘edit’ in the box itself - can you please just tell me how to do it - maybe it is the size of the image? Thanks.

Hello there,

It seems like we can use additional CSS to accomplish it.

Do you have a link to your site, so I can have a look?

Regards,
Kharis

I always forget that - sorry - www.mccinternalmedicine.org

gserafy@hotmail.com
95PKshooter!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .action-area {
      background-size: cover !important;
    }

Regards,
Kharis

No, that did not work - tried it in the page ‘edit row’ and ‘edit’ areas as well…

Looks worse on mobile…

I tried more things today - no luck, changed the image to smaller but that makes it worse and still worse on mobile - tried different settings in the ‘Design’ section of the ‘Edit’ section of homepage.

Hello there,

Try this CSS code to maintain the image and change the font size to become smaller on mobile screen.

    @media only screen and (max-width: 1024px) {
      #pgc-2040-1-0 .so-panel.widget .widget-title {
        font-size: 30px;
      }
    }

    @media only screen and (max-width: 600px) {
      #pgc-2040-1-0 .so-panel.widget .widget-title {
        font-size: 25px;
      }
    }

Regards,
Kharis

I put it in Customize>Additonal CSS and no luck

Hello there,

I viewed the source code of your site and it seems like the code hasn’t yet been applied. Or did you remove it? Please keep it remains to help me debug and troubleshoot it from your site.

Regards,
Kharis

I kept it in there and it is still there and I just double-checked to be sure…

Any luck with this issue?

Hello there,

Try adding the below custom CSS code and see how it works for you.

    @media only screen and (max-width: 800px) {
      #pgc-2040-1-0 .so-panel.widget .widget-title {
        font-size: 18px;
      }
      .action-area {
        background-size: contain !important;
      }
    }

Regards,
Kharis

No, that did not work - I put it in Appearance>Additional CSS - maybe I have conflicting info now? Here is what I have…

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

#main .entry-content a.all-news {
  border-bottom: 1px solid #ff6b53 !important; 
} 
.hentry .entry-content a {
  color: #293bff;
}
.hentry .entry-content a:hover {
  color: #66cfff;
}
@media only screen and (min-width: 992px) {
  .main-navigation .sub-menu a {
    color: #293bff;
  }  
  .main-navigation .sub-menu a:hover {
    color: #05c59f;
  }    
}
.welcome-button:hover, .welcome-button:visited, .call-to-action:hover, .call-to-action:active {
  background-color: navy;
  box-shadow: 0 5px 0 red; 
}
a.scroll-down-arrow,
a.scroll-down-arrow:active,
a.scroll-down-
arrow:visited {
  outline: none;
	color: #ffff;
}
a.scroll-down-arrow:hover {
  color: #66cfff;
}  
@media only screen and (max-width: 991px) {
  .welcome-desc a {
    color: #ffffff !important;
  }
}
#masthead .scroll-down-arrow {
  display: none;
}
@media only screen and (max-width: 1024px) {
  #pgc-2040-1-0 .so-panel.widget .widget-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 600px) {
  #pgc-2040-1-0 .so-panel.widget .widget-title {
    font-size: 25px;
  }
}
@media only screen and (max-width: 800px) {
  #pgc-2040-1-0 .so-panel.widget .widget-title {
    font-size: 18px;
  }
  .action-area {
    background-size: contain !important;
  }
}

Hello there,

I viewed the source code of your site and didn’t get the last code be applied.

    @media only screen and (max-width: 800px) {
      #pgc-2040-1-0 .so-panel.widget .widget-title {
        font-size: 18px;
      }
      .action-area {
        background-size: contain !important;
      }
    }

Did you remove it?

Regards,
Kharis

I go to Customize>Appearance>Additional CSS and what I have pasted above is what is there - I have copied and pasted everything you have sent me - I am not really sure how source code figures into this but I am glad to do whatever you indicate to me…

Hello there,

Probably you should have to clear site caching (if applied).

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Cleared it, same code in the additional CSS area and nothing changed…

Hello there,

Try to apply the last CSS code I suggested with this plugin

Regards,
Kharis

I just gave up and am trying to add just one image that spans the width of the site but I could not even do that so I added a slider which I don’t really like - if you have any knowledge how to put an image in that would be helpful - I tried to add an image
widget but, again, failed.

Grant Serafy
478-951-7104

www.sarafisadyton.com