Showcase Pro – How to move button in front-page-1 slightly to the right

[XWrecon]

I am starting to build a sight using Showcase Pro https://showcase.designbybloom.co/
and was wondering how I could move the "Get Showcase" button slightly to the right so that it is not centered anymore? I know you can do an alighright in the widget but this is pushing it too far right. Is there any code I could use to move it right and have some control on how far right to move it?

Any help is appreciated!

[brock]

You can use the CSS position property.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

[XWrecon]

Thanks for the reply!

I took a look but am pretty new to coding. If I wanted to move the button (which is currently centered) for example one inch to the right of center would I be doing something like position relative left: xxpx in CSS and then figure out how to put it in the html somewhere?
Is there just a html only option to move this button to the right?

Thanks!

[XWrecon]

I am still developing this site but here is another example of the Showcase theme I did to give you a specific example:

http://www.purchaseorderfinancing.com

I would like to move the "Let's Talk" button over to the right (for example right under the "any size" copy in the line above.

Hope that helps clarify my needs.

[Erika]

Hi XWrecon,

This code should do it for you. Place it at the bottom of your css file near the other media queries:

@only screen and (min-width: 1100px) {
.front-page-1 .button {
	margin-left: 367px;
   }
}

Let me know if this helps!

[XWrecon]

Thanks Erika that did it!

Just one follow up question, I plan on putting a small logo (image.png) just below the button and wass to move it right as well. I so was wondering if I could do something similar to what you are showing here for the image? Or would this be some sort of html code to move the image to the right?

[Erika]

Hmm, you could try:

<img src="YOURIMAGE.jpg" alt="IMAGE DESCRIPTION" class="front-page-1-pic">

Place the above code in your custom HTML widget with all the other info. Then swap out the other code I gave you with this:

@only screen and (min-width: 1100px) {
.front-page-1-pic,
.front-page-1 .button {
	margin-left: 367px;
   }
}

You may have to center the image before it lines up appropriately.

[XWrecon]

Thanks!

[Author]

Posts