Canvas Support

Flip Cards - Modify flip-card-back

1 reply · opened Oct 14, 2022

PPavelRomeroOct 14, 2022

Hello:
I want to modify the back of the Cards to be able to show more information about a service / product. For this I would like to implement part of the layout of block-content-pricing-1.html.

  1. How do I get the style of the texts? See red boxes of attached images.

  2. The price is displayed fine in the desktop view, but in the mobile view it moves from its place. How do I make it always be in the position of the desktop view? See green box of attached images.

` <div class="flip-card-back bg-ultra no-after">
<div class="flip-card-inner">
<div class="d-flex mt-4">
<div>
<p class="text-white">- 40 Fotografías.</p>
<p class="text-white">- 10 Fotografías 360.</p>
<p class="text-white">- 3 Videos.</p>
</div>
<div class="ms-sm-auto">
<p class="text-white" style="font-size: 2.5rem">S/.49.00</p>
</div>
</div>
<label id="SPANxBRSRangoDiasCaption" class="dxbs-edit-caption col-form-label"><%= GetLocalResourceObject("SPANxBRSRangoDiasCaption") %></label>
<div style="margin-bottom: -70px">
<dx:BootstrapRangeSelector EnableViewState="False" ID="BTSxBRSRangoDias" runat="server" SelectionStart="0" SelectionEnd="30" Width="100%">
<SettingsScale MinorTickCssClass="CPTBootstrapRangeSelectorMinorTick" Label-CssClass="CPTBootstrapRangeSelectorLabel" TickCssClass="CPTBootstrapRangeSelectorTick" MinorTickInterval="30" StartValue="0" EndValue="360" TickInterval="30" Type="Continuous" ValueType="System.Decimal" />
<SettingsSliderMarker TextCssClass="CPTBootstrapRangeSelectorText" PolygonCssClass="CPTBootstrapRangeSelectorPolygon" />
</dx:BootstrapRangeSelector>
</div>
<span id="SPANxBRSRangoPrecioHelpText" class="form-text text-muted BRSHelpText" runat="server"><%= GetLocalResourceObject("SPANxBRSRangoPrecioHelpText") %></span>
<div style="text-align: center">
<button type="button" class="btn btn-outline-light mt-2">View Details</button>
<dx:BootstrapButton ID="BootstrapButton1" runat="server" AutoPostBack="false" Text="Contratar">
<CssClasses Control="CPTBootstrapButton" Text="CPTBootstrapButtonText" />
</dx:BootstrapButton>
</div>
</div>
</div>

SSemicolon WebSTAFFOct 16, 2022

Hello,

  1. You will need to copy the CSS Codes related to this Block from the Source File and paste it in the new file where you will be using this section.

  2. You will need to change the .ms-sm-auto Class to .ms-auto Class.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard