Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Centering Rollovers on Mobile


FLSD

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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;
}
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...