Customization Tips | Wimble - Documentation | JoomShaper

Wimble

Updated Last: 26 December 2022

Customization Tips

How to reduce Article Title font size in a single article view

You have to use custom CSS, below is an example code that will reduce/decrease the font size, and make it 50% smaller.

.view-article .article-details .wimble-article-details-title-wraper .wimble-article-details-title-wrap .article-header h1, 
.view-article .article-header h1 {
  font-weight: 800;
  font-size: 44px;
  line-height: 54px;}

How to reduce Articles Title's font size used in a blog view

You have to use custom CSS, below is an example code that will reduce/decrease the font size a little bit:

.wimble-article-classic-view .articles-leading .article .article-body .wimble-article-wrap .article-header h2,
.view-category .article-header h2 {
  font-weight: 600;
  font-size: 40px;
  line-height: 50px;
}


.wimble-article-classic-view .article .article-header h2 {
  font-weight: 800;
  font-size: 20px;
  line-height: 30px;
}

Of course, you can use your custom values for font size, weight, and line height. Above are only example values to show you a difference after using them. Using @media, you can also reduce font size for different views (laptop/tablet).

How to show article Title in Mobile view

If you want to show the article title in a single article view on a smartphone (iPhone 4-X, Android) screen you have to use custom CSS because by default article title is hidden in the mobile view:

 @media only screen and (max-width: 820px) {
.view-article .article-details .wimble-article-details-title-wraper .wimble-article-details-title-wrap {
  display: block !important; top: 30px;}

.view-article .article-details .wimble-article-details-title-wraper .wimble-article-details-title-wrap .article-header h1,
.view-article .article-details .article-header h1 {
  font-weight: 600;
  font-size: 32px !important;
  line-height: 38px;
  letter-spacing: -1px;
  width: 95%; }
}

Where to use Custom CSS code

Custom CSS code can be used inside: Templates > Wimble > Template Options > Custom Code > Custom CSS
or
by using a new custom.css file inside the "/css" folder according to Helix Ultimate documentation.