Naturo Pro – button alignment on pages within the sections

[Phil]

Wehn adding a button on the Section, sections, … using the short codes (and change the code from ‘left align’ to ‘center’ they still are placed on the far left… when live

On the section with an image on the right and copy on the left, the button aligned far right ????

So for now I just used ‘anchor’ text with link embedded ( which btw, There’s no quick option in the page builder menus in the sections to add ‘links or images’ like on the actual page builders, they have to be coded and images pasted….

I also tried using an image of a CTA button with a redirect link to the contact page and that doesn’t work either … When you align center using the builder menu even – when the page is viewed its actually aligned left. Its like I can make a button short code, an and image align center by changing the short-code name or using the builder menu … but only in the section builder…

Here’s your short code and then my modification 2nd, Am I doing something wrong? Maybe you spell center different than we do in Canada?

[gradient_button size=”medium” bg_color=”#060″ color=”#fff” text=”Medium Gradient Button” title=”Medium Gradient Button” url=”” position=”left”]

[gradient_button size=”medium” bg_color=”#060″ color=”#fff” text=”Get a Free Quote” title=”Medium Gradient Button” url=”” position=”center”]

[Sonnal S Sinha]

Hi,

Kindly show us your website URL so that we can assist further.

Regards,
Dave

[Phil]

https://goldstarservicesgroup.com/

the buttons in question are not on there now as I removed them and used plain anchor text, but I want them in the main landing page area in the top section where the first copy is (where you see the anchor link to the contact instead of a button, and also down in the join the team section, again where the anchor is to ‘learn more’. The anchor text link is the only thing I could get centered –

My client is so pissed of with this site build and all the issues I’ve had to wait to have addressed and in waiting for tech support… very disappointed.

[Sonnal S Sinha]

Hi,

Right now your anchor text link is already centered align.

Regards,
Dave

[Phil]

Dave, are you serious? I just said that in the message previous, did you read it?

I changed the button to anchor text because I couldn’t center your button short-code or an image of a button and I needed the site to look proper for visitors.

I’ll add the button short code now in those 2 spots and you can look at it again. You didn’t ask me to show you it wrong, you just asked for the URL.

Have another look, …

https://goldstarservicesgroup.com/

[Sonnal S Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

.btn-align-center {display: table !important; float: none; margin: 0 auto;}

Regards,
Dave

[Phil]

Thanks did that, now have another looks and adjust your screen window size and watch what happens to everything responsively, the title text in the title boxes messes up, also images ect… don’t align center – i use a wide screen and everything looks great but clients on a laptop and keep sending me messages about everything looking a mess.

[Sonnal S Sinha]

Hi,

Can you send us the screenshot? Upload your screenshot on imgur.com and paste the share url here.

Regards,
Dave

[Phil]

1. http://imgur.com/yl8AI0e boxes and text messed up, words split into different lines instead of the font size reduction

2. http://imgur.com/27ixH5t images don’t align center when screen made smaller

3. http://imgur.com/FyiArwj notice the vertical alignment in mobile view is off

All a mess – this is not how a responsive theme should work

Could you not see this yourself by looking at the site and minimizing you window somewhat and looking at how it responds?

[Sonnal S Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.gallery img { margin:0 auto !important; display:table !important;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.six_column { width:32%;}
.four_column h3 { font-size:16px;}
.slide_info h2 { font-size:22px !important;}
.slide_info p { font-size:16px !important;}
.client-wrap img { margin:20px 10px !important;}
}

Regards,
Dave

[Author]

Posts