Semantic-UI Advertisement Mobile Type

Last Updated : 20 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Advertisement helps to make containers to display ads from third-party services like Google Ads, Media.net, etc. The Advertisement element helps to give a proper shape by using only HTML classes.

Semantic UI Advertisement Mobile type is used for mobile devices that can use common ad sizes. The ads will only be visible to mobile devices and hidden from view as the device becomes desktop.

Semantic UI Advertisement Mobile type classes:

mobile: Add this class before any ad name and the ad will be displayed according to mobile dimensions.

Syntax: Add the mobile before the ad name and the ad will be modified for it accordingly.

<div class="ui mobile banner ad" data-text="Mobile Banner Ad">
    <!-- Ad code -->
</div>

Example: In the following example, we have different types of mobile ads.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
         "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
      body { 
        padding: 10px; 
        margin: 10px; 
      } 
    </style> 
  </head> 
  
  <body> 
    <center> 
      <div class="ui header green"> 
        <h1> GeeksforGeeks  </h1> 
      </div> 
      <strong> Semantic UI Advertisement Mobile type</strong> 
    </center> 
    <div class="ui segment"> 
      <h1>Welcome to GeeksforGeeks</h1> 
      <p>Find the best programming tutorials here.</p> 
  
      <div class="ui mobile leaderboard test ad"
          data-text="Mobile Leaderboard Ad"></div> 
      <div class="ui mobile banner test ad" 
           data-text="Mobile Banner Ad"> 
      </div> 
      <div class="ui mobile large rectangle test ad"
           data-text="Large Rectangle Ad"> 
      </div> 
      <div class="ui mobile medium rectangle test ad"
          data-text="Medium Rectangle Ad"> 
      </div> 
      <div class="ui mobile small rectangle test ad"
          data-text="Small Rectangle Ad" ></div> 
      <div class="ui mobile half page test ad" 
          data-text="Half Page Ad"> 
      </div> 
    </div> 
  </body> 
</html> 