Jump to content

Centering Rollovers on Mobile

Recommended Posts

Site URL: http://cclglobal.org

Hi! I can't figure out how to get my 4 rollovers on the home page to center on mobile. They are circle graphics under Forum Member Experience.

I added this CSS:

{
   background-color: #aeaeae;
}

#img-hover1 { 

   background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c58762232b8617bcbd39b/1596741750873/CCL_icon_peer1.jpg');

    height: 100px;

    width: 100px;

    background-size:contain; }

#img-hover1:hover {

    background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c587cc963ae176b5f4a95/1596741756609/CCL_icon_peer2.jpg');

 

And then used this code on the page:

<a href="https://cclglobal.squarespace.com/forum-member-experience/#forum"><div style="width:100%;text-align:center;background-repeat:no-repeat;" id="img-hover1"></div></a>

 

Thank you in advance for helping me!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f160e798fd50a4d36a58bcb .code-block * {
    text-align: center;
    margin: 0 auto;
    background-position: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.