Docs

[365Sussex]

Hi support

I am having an issue with a button in a content band by default it aligns in middle of band on the left I can force to right with float right as shortcode instruction but I cannot see how to then position it at the bottom of the band.

example is the map along side Where and when do we meet on http://www.highdownchurch.org.uk

I have replaced a Google maps element with a content band containing a map image the default location for a button within the container is middle to left but I want to place it in the blank area on the map bottom right

The code for content band is

[content_band no_margin="true" inner_container="true"
    style="padding: 30% 0px;" bg_color: #fff;"
    bg_image="http://www.highdownchurch.org.uk/wp-content/uploads/2016/05/Map2.png"
    border="none"
    inner_container="true"]
    [button type="transparent" shape="rounded" size="small" href="http://goo.gl/maps/ocOqy" target="blank" title="Oak Grove College"]Google Maps[/button]
[/content_band]

the following post now archived https://community.theme.co/forums/topic/centering-a-button-within-container/ shows how to align centre but I cannot work out how to align right bottom

Can you please help

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

#x-content-band-1 .x-btn {
    margin: 0 auto;
    display: block;
    max-width: 138px;
}

Hope it helps 🙂

[365Sussex]

that has same effect as adding margin:0 auto;display:table; as a style to the button ie centers in the display panel

where as I need/want to align at bottom of panel in the blank are on the map

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

#x-content-band-1 .x-btn {
    margin: 0px auto;
    display: block;
    max-width: 138px;
    position:relative;
    top:120px;
    left:140px;
}

Hope this helps – thanks!

[365Sussex]

Thanks so much John

Sorted layout perfectly

[365Sussex]

Looked at it again works fine for desktop but not mobile.

[Friech]

Hi There,

Please update the css code to:

@media (min-width:  768px) {
	#x-content-band-1 .x-btn {
    margin: 0px auto;
    display: block;
    max-width: 138px;
    position:relative;
    top:120px;
    left:140px;
}
}

Hope it helps, Cheers!

[365Sussex]

Hi Friech / Support team

Thanks for that still not quite what I am looking for….

I know it can be done because on the X website the section Incredible Shortcodes has a 3D marketing button “I’m A Shortcode!” which stays in fixed position relative to other text whilst background scales according to display size albeit with right edge cut off as screen size reduces but the textual layout remains the same and I am assuming I should be able to do similar with position of button

[Paul R]

Hi,

Please change your code to this.

[content_band no_margin="true" 
    style="padding: 30% 0px;position:relative;" bg_color: #fff;"
    bg_image="http://www.highdownchurch.org.uk/wp-content/uploads/2016/05/Map2.png"
    border="none"
    inner_container="false"]
    [button type="transparent" shape="rounded" size="small" href="http://goo.gl/maps/ocOqy" target="blank" title="Oak Grove College"]Google Maps[/button]
[/content_band]

Then change your css code with this.

.x-raw-content #x-content-band-1 .x-container {
    position: absolute;
    bottom: 10%;
    left: 50%;
}

You may change 10% and 50% to adjust the alignment of your button.

Hope that helps

[365Sussex]

Superb help as always

Thanks Paul

Please also pass on my thanks to your colleagues

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts