Another Home page button issue

Support
#1

My homepage button is not staying center over my image like I was hoping it would. During different displays (mobile, desktop, Tablet, Zoom in/out) the button gets larger and fails to center over the image. Please help me fix this. Here is the button that is failing to cooperate with me and here is the link to my homepage. Thank you!

#2

Hi @Kiselstein,

Thank you for reaching out to us. To center the button over the image simply move your button inside the div that has a class sw-pinit (see screenshot)

Let us know how this goes!

#3

I don’t understand, am I supposed to pull up that menu and adjust the html coding? or I am supossed to figure out what all of that means? Either way, I have no Idea how I would edit that if you’re asking me to edit the html

#4

Hi Brian,

Can you please update the button CSS that you have with this.

.my-fix-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

Let us know if that helps!

Thanks

#5

Unfortunately not. Not sure why it isnt working. Should I leave log info to let one of see what might be going on?

#6

Hi there,

Can you please send us your login details via secure note so that we can have a look?

Thanks

#7

I can do that

#8

Hi again,

I tried to login with the provided credentials but they are’t working on my end. Please double check the credentials. In the mean time try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.home .my-fix-button').insertBefore('.home .sw-pinit > img');
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

no it didnt work. Sorry, heres the correct log in info

#10

Hi Brian,

Please note that the main issue why the button is not centering is because of how your section is setup. The image and the button are two separate elements so it would be tricky to have them get position to how you want since they have different containers and they behave and resize differently.

Kindly rework the section and follow the steps below:

#1. Create a new section and set the top and bottom padding to 0 and set the section’s background lower layer to the blueberry image then set the background upper layer to the healthy fitness image and make sure to set the background size and position of the second background to contain and top right.

#2. Set the section’s column to 2/3 by 1/3.

#3. Edit the row settings and disable the Inner Container option:

#4. Edit the row settings and click on the customize option and add this to the Element CSS:

$el {
  display: flex;
}

#5. Just like what you did to the row settings, add this code to the second column’s element’s CSS.


$el {
  position: relative;
}

#6. Add the button element to the second column and add this code to the button element’s element CSS:

$el {
  position: absolute;
  bottom: 10px;
  right: 18%
}

You should get a result like this:



Additionally, here is a reference link to the KB article for the Element CSS:

Hope this helps.

#11

obviously I did something wrong. When I followed exactly what you stated, my section size was almost the equvilent of thin line. So I couldnt see my new section I created, so I followed an older thread and added a fill gap element. Maybe thats where I went wrong, but Im back to where I was again…

#12

Hello @KiselStein,

Please understand that you are trying to center the button inside the background image which is way beyond the bounds of the columns.

I would highly suggest that you use a different approach. In my own opinion, it is best to create the following:

  • Create a section.
  • Set the row setting where the Marginless column option is enabled and the Inner Container as disabled.
  • The columns will be divided into two.
  • The Left column will have a background image.
  • In your right column, you will need to insert the image and button element which would be linked to the homepage.

I have created a sample page for you. Please check it here:

Hope this helps.

#13

I checked your sample page, when I zoom in and out, the columns seperate and leave a white gap in-between…

#14

If you could double check to see what I did wrong… still having trouble please

#15

Hello @Kiselstein,

I have edited my example and test page to make sure that the image will display without any spaces around it. The retina option of the image should be disabled and the width should be set to 100%. I also deactivated Photon module (image accelerator) from Jetpack because it is caching images and that will pose a problem while you are still building the pages.

Please check the test page.

#16

Thank, finally got it to work. Thank you again

#17

We are delighted to assist you with this.

Have a nice weekend.

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.