Docs

[jamaicatravelsaver42]

Hi,
Can you tell me how to do the following please:

1) How do you reduce the width of content band
2) How do I get the data in a column to display at the bottom of the column (I want to do this for the red button)
3) Are there any short codes to get my prices to look like this: http://www.viator.com/Santorini-tourism/Greek-Islands-Tours-tours-tickets/d496-t2937 (small dollar sign and large numbers)
4) How do I reduce the padding in a column
5) How do I remove the space around the content band

Thanks in advance

[jamaicatravelsaver42]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! #1 Would you mind pointing to us the content bands that you’re referring to? If you mean the x-container you can adjust the on Customizer under the Layout and Design panel look for the Site Max Width and Site Width options.

#2 You’re referring to the red button on the sidebar, yes? You can add this on your custom CSS on customizer

#text-7 #x-section-1 {
	padding-bottom: 0 !important;
}

#3 Write your pricing like this <strong>SAVE US <sup>$</sup>75.90</strong>

#4 Please point us to the column that you’re referring to. Im only seeing a column on your sidebar, you can adjust its padding by adding an inline styling to it

style="padding: 0;"

#5 Refer to #1

Cheers!

[jamaicatravelsaver42]

This reply has been marked as private.

[jamaicatravelsaver42]

This reply has been marked as private.

[Friech]

Hi There,

To reduce the width of comment area, add this on your custom css in customizer

@media (min-width:  768px) {
	div#comments {
	    max-width: 50%;
	    margin: 0 auto;
	}
}

For the pricing, you can use this HTML code

<div class="product-price">
<span class="price-from">From USD</span>
<span class="price-amount"><span class="currency-sign">$</span>161.07</span>
<a class="x-btn my-btn">See Details</a>
</div>

And add this custom CSS in Customizer.

.product-price {
    float: right;
    text-align: right;
}
.product-price span:not(.currency-sign) {display: block;}
.price-amount {font-size: 2em;}
.currency-sign {font-size: .5em;vertical-align: .7em;}

Hope it helps, Cheers!

[jamaicatravelsaver42]

This reply has been marked as private.

[Paul R]

Hi Charmaine,

To make it the same look as viator page, you can add this under Custom > Edit Global CSS in the Customizer.

body .product-price {
    line-height: 28px;
}

You may change 28px to adjust line spacing.

Hope that helps.

[Rue Nel]

Hello Charmaine,

To remove the extra spaces you have pointed out from your last reply, simply find this css block in your customizer,

.product-price {
    float: right;
    text-align: right;
}

You’ll need to update it and make use of this code instead:

.product-price {
    float: right;
    text-align: right;
    line-height: 24px;
}

Please noticed that we added line height. You can adjust this line height for you to control the extra spaces.
Hope this helps. Kindly let us know.

[jamaicatravelsaver42]

Hi,
I works! Thanks! A few more things:

1) I want this whole section (“From USD”, “$35” and “See Details Button) to be aligned to the bottom of the column. How do I do this. I want the button to be directly across from the “Read More” text.

2) How do I reduce the width of the content band

3) How do I reduce the amount of padding between the images and text and the border of the content band.

Thanks in advance,

[Rupok]

Hi there,

Thanks for updating.

#1. Kindly update the below code :

.product-price {
  float: right;
  line-height: 26px;
  text-align: right;
}

to this :

.product-price {
  float: right;
  line-height: 26px;
  margin-top: 40px;
  text-align: right;
}

#2 and #. You can add a class (say my-content-band) name to the content band and add the below code for the class and us this CSS :

.x-content-band.my-content-band {
  margin: 0 auto;
  max-width: 600px;
  padding: 15px 0 !important;
}

Note : In that case you might need to increase the margin-top: 40px; for #1.

If you need to adjust more, kindly alter the CSS.

Hope this helps.

Cheers!

[jamaicatravelsaver42]

Hi,
Got it! Thanks. One more question how do I reduce the space at the bottom of the content band here: http://www.ocho-rios-jamaica.com/content-band-page/ . This is the space below the Read More text and the show details button.

Thanks in advance

[Friech]

Hi There,

Add this on your custom CSS in Customizer.

.page-id-1798 #x-content-band-1 br {display: none;}

Cheers!

[Author]

Posts