Help with moving/customizing the location of the red more button

• 

  acbrd · Member · May 26, 2017 at 1:02 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I really need help with moving/customizing the location of the red more button on the slide show on the home page.

  I would like to move it so it sits centred 3/4 at the bottom of the image and not totally centred.

  I hope that makes sense :)

  and thanks in advance for your help :)

  The blog I need help with is: (visible only to logged in users)

• 

  shawnlimbach · Member · May 26, 2017 at 5:10 am

  • Copy link

  Your website is not accessible. Marked Private.

• 

  shawnlimbach · Member · May 26, 2017 at 5:22 am

  • Copy link

  You could try to style the button with something like:

  margin-left:calc(25%)

• 

  acbrd · Member · May 26, 2017 at 5:23 am

  • Copy link

  Do i cut and paste that in the css section??

• 

  shawnlimbach · Member · May 26, 2017 at 5:49 am

  • Copy link

  Now I can see the site. Now that I look at it, what I wrote won’t quite work.

  This does: margin-left:-75%; or margin-left:-200px

  but not sure if it will be quite right for all devices. There might be a better way.

  Add it in css on line 880 which looks like this:

  .slider-meta .more-link-text {
  width: 100%;
  border: 3px solid #fff;
  font-size: 20px;
  padding: 10px 30px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  font-family: ‘Roboto’;
  margin-left:-75%;
  }

• 

  shawnlimbach · Member · May 26, 2017 at 5:53 am

  • Copy link

  Try this instead on line 876, add “margin-right:75%”

  .slider-meta .more-link {
  margin-top: 40px;
  display: block;
  margin-right: 75%;
  }

• 

  acbrd · Member · May 26, 2017 at 5:55 am

  • Copy link

  does it have to be line 876?? cause the CSS customiser i see is only up to line 15?

• 

  acbrd · Member · May 26, 2017 at 5:57 am

  • Copy link

  It seems to have changed the read more button on the home page slider

• 

  acbrd · Member · May 26, 2017 at 5:58 am

  • Copy link

  It has moved to the left! but i would like it in the centre.. but located 34% down from the center

• 

  shawnlimbach · Member · May 26, 2017 at 6:01 am

  • Copy link

  Can you add this to the customiser? Don’t worry about the line numbers.

  .slider-meta .more-link {
  margin-right: 75%;
  }

• 

  acbrd · Member · May 26, 2017 at 6:02 am

  • Copy link

  I dont think it is moving???

• 

  shawnlimbach · Member · May 26, 2017 at 6:28 am

  • Copy link

  Try margin-top, which will move the button down from the top of the slider.

  However, It looks like some of your text is moving, too, with the button when using

  .slider-meta .more-link {
  margin-top: 75%;
  }

  The slider height is not consistent. Sometimes it is 543px high and sometimes other heights. That affects my suggestions.

  Below are other uses of margin-top, but, now not sure that is going to help. So sorry.

  ====================

  .slider-meta .more-link {
  margin-top: 75%;
  }

  If the percentage doesn’t work, you could try an exact amount of pixels, like margin-top:200px.

  if you know what your slider image height is, you could do a calculation like:

  margin-top: calc(543px * .25);

• 

  acbrd · Member · May 26, 2017 at 6:34 am

  • Copy link

  Thank you for your help :)