admin:online-platform-cms:promotions

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
admin:online-platform-cms:promotions [2021/02/18 16:22] – justas-dambrauskasadmin:online-platform-cms:promotions [Unknown date] (current) – external edit (Unknown date) 127.0.0.1
Line 36: Line 36:
 .cms-holder .img_area { .cms-holder .img_area {
   height: 50%;   height: 50%;
 +  overflow: hidden;
 } }
  
Line 41: Line 42:
   object-fit: cover;   object-fit: cover;
   width: 100%;   width: 100%;
-  height: 215px; 
   border-top-left-radius: 4px;   border-top-left-radius: 4px;
   border-top-right-radius: 4px;   border-top-right-radius: 4px;
Line 78: Line 78:
   color: var(--main-primary-text);   color: var(--main-primary-text);
   border: 0px none;   border: 0px none;
 +  display: inline-flex;
 +  align-items: center;
 } }
  
 .cms-holder .button:hover { .cms-holder .button:hover {
   background: var(--main-primary);   background: var(--main-primary);
 +  color: var(--main-primary-text);
   cursor: pointer;   cursor: pointer;
   filter: brightness(85%);   filter: brightness(85%);
 +}
 +@media screen and (max-width: 440px) {
 + .cms-holder .row {
 +   grid-template-columns: repeat(auto-fill, 300px);
 + }
 + .cms-holder .promo-card {
 +   height: 375px;
 + }
 + .cms-holder .img_area {
 +   height: 40%;
 + }
 + .cms-holder .text_area {
 +   padding: 30px 20px;
 + }
 } }
 </style> </style>
Line 131: Line 148:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button"> 
-          <button type="button" class="button"> +          More Info
-            More Info +
-          </button>+
         </a>         </a>
        </div>        </div>
Line 147: Line 162:
 Change promotion sub-title (note: In this example, a promotion sub-title is "**We’ll match your first bonus of up to 20,000 TSh! Sign up today.**".) Change promotion sub-title (note: In this example, a promotion sub-title is "**We’ll match your first bonus of up to 20,000 TSh! Sign up today.**".)
  
-Change link to full promotion description. To change it you need to edit the link in this part of code **<a href="link_to_page">**+Change link to full promotion description. To change it you need to edit the link in this part of code **<a href="link_to_page" class="button">**
 ---- ----
 === 6. Create more promotion cards ===  === 6. Create more promotion cards === 
Line 190: Line 205:
 .cms-holder .img_area { .cms-holder .img_area {
   height: 50%;   height: 50%;
 +  overflow: hidden;
 } }
  
Line 195: Line 211:
   object-fit: cover;   object-fit: cover;
   width: 100%;   width: 100%;
-  height: 215px; 
   border-top-left-radius: 4px;   border-top-left-radius: 4px;
   border-top-right-radius: 4px;   border-top-right-radius: 4px;
Line 232: Line 247:
   color: var(--main-primary-text);   color: var(--main-primary-text);
   border: 0px none;   border: 0px none;
 +  display: inline-flex;
 +  align-items: center;
 } }
  
Line 238: Line 255:
   cursor: pointer;   cursor: pointer;
   filter: brightness(85%);   filter: brightness(85%);
 +  color: var(--main-primary-text);
 +}
 +@media screen and (max-width: 440px) {
 + .cms-holder .row {
 +   grid-template-columns: repeat(auto-fill, 300px);
 + }
 + .cms-holder .promo-card {
 +   height: 375px;
 + }
 + .cms-holder .img_area {
 +   height: 40%;
 + }
 + .cms-holder .text_area {
 +   padding: 30px 20px;
 + }
 } }
 </style> </style>
Line 262: Line 294:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a>
-          <button type="button" class="button"> +
-            More Info +
-          </button> +
-        </a>+
        </div>        </div>
     </div>     </div>
Line 282: Line 310:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="/app/en/single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 302: Line 326:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 329: Line 349:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 349: Line 365:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 369: Line 381:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 389: Line 397:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 409: Line 413:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 421: Line 421:
  
 === Result === === Result ===
 +----
 {{ :admin:online-platform-cms:promotions.png |{{:admin:online-platform-cms:promotions.png?nolink&600|}} {{ :admin:online-platform-cms:promotions.png |{{:admin:online-platform-cms:promotions.png?nolink&600|}}
 +----
 **✔ Always use HTML view option in the page editor window while doing all steps.** **✔ Always use HTML view option in the page editor window while doing all steps.**
 +----
  • admin/online-platform-cms/promotions.1613665351.txt.gz
  • Last modified: 2021/02/18 16:22
  • (external edit)