{"id":26,"date":"2020-07-18T21:03:41","date_gmt":"2020-07-18T19:03:41","guid":{"rendered":"http:\/\/themedemos.webmandesign.eu\/eimear\/?page_id=26"},"modified":"2020-07-18T21:03:41","modified_gmt":"2020-07-18T19:03:41","slug":"helper-css-classes","status":"publish","type":"page","link":"https:\/\/marioskontis.com\/el\/helper-css-classes\/","title":{"rendered":"Helper CSS Classes"},"content":{"rendered":"<div class=\"wp-block-group alignfull has-palette-5-background-color has-background has-no-margin-bottom\" id=\"typography\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<style>\n.wp-block-column { padding: .5rem 1rem; }\n.wp-block-column:first-child { background: rgba(0,0,0,.05); }\nh3 { text-transform: none; letter-spacing: 0; }\n<\/style>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Text &amp; typography classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>h1<\/code>, <code>h2<\/code>, <code>h3<\/code>, <code>h4<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Styles the text the way H1, H2, H3 and H4 headings are styled. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-widget-title-style<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Styles the heading the way widget title is styled. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-left\/center\/right-text-align<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Apply on any element. Forces text alignment. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-uppercase-text-transform<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Transforms elements text to uppercase letters.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-font-size<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sets element&#8217;s font size.<br \/>Possible <strong>SIZE<\/strong> values: <code>extra-small<\/code>, <code>small<\/code>, <code>smaller<\/code>, <code>regular<\/code>, <code>large<\/code>, <code>extra-large<\/code>, <code>huge<\/code><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-100\/200...\/900-font-weight<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Applies specific font weight on an element.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-italic\/normal-font-style<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Applies specific font style on an element.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-line-height<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sets element&#8217;s line height.<br \/>Possible <strong>SIZE<\/strong> values: <code>1<\/code>, <code>extra-small<\/code>, <code>small<\/code>, <code>regular<\/code><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-no-margin-bottom\" id=\"layout\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Layout classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>megamenu<\/code> or <code>megamenu fullwidth<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on a primary navigation top level menu item (<a href=\"https:\/\/easycaptures.com\/fs\/uploaded\/1404\/8369568540.png\" target=\"_blank\" rel=\"noreferrer noopener\">how to?<\/a>) to style the submenu as megamenu. Applying additional class of <code>fullwidth<\/code> will stretch the megamenu full width of the screen while keeping the megamenu content withing content width (set up in theme options).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check the theme documentation for more details on <a href=\"https:\/\/webmandesign.github.io\/docs\/eimear\/#megamenu\">how to create a megamenu<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-half\/phi\/full-screen-min-height<\/code>,<br \/><code>has-70\/75\/80\/85\/90\/95-percent-screen-min-height<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sets the minimum height of the element as a portion of browser window height (phi = 61.8%). Best applied on full width Cover block, for example. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-wide-content-width<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Apply on Cover or Group block to make the block content wider. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-phi\/no-padding<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sets element&#8217;s padding (1.618em, 0). Can be applied on Column block to force a specific column padding.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-padding<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sets element&#8217;s padding size.<br \/>Possible <strong>SIZE<\/strong> values: <code>extra-small<\/code>, <code>small<\/code>, <code>regular<\/code>, <code>large<\/code>, <code>extra-large<\/code> <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-padding<\/code>, <code>has-no-padding-left\/right\/top\/bottom\/vertical\/horizontal<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Removes any <code>padding<\/code>from an element.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-regular-margin-bottom<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Applies theme&#8217;s default bottom margin on the element.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-margin<\/code>, <code>has-no-margin-left\/right\/top\/bottom\/vertical\/horizontal<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Removes any margin from an element.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-center-vertical-align<\/code> or <code>is-cascade<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use in Latest Posts or any WooCommerce products list block to align items horizontally to center (in a row). This creates interesting cascading layout.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-gaps<\/code> or <code>has-no-gap<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on Gallery block to remove gaps between images.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-info-overlay<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on any WooCommerce products list block to position product info as overlay over the product thumbnail.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-info-on-hover<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on any WooCommerce products list block to position product info as overlay over the product thumbnail and display it only when mouse hovers over the product thumbnail.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>is-sticky-within-container<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on a block that should stick while scrolling within its container. Best used on a Group block within a column block while other column(s) in the row contain long content. The Group block will stay stuck to the top of the screen while scrolling through the long content in other column(s). <a href=\"https:\/\/themedemos.webmandesign.eu\/eimear\/ideas\/idea\/#sticky\">See an example.<\/a><br \/>Works on large screens only.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-order-first\/last<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on Column block to force position a column first or last in a row on larger screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example: <\/strong>This is useful if you would like to display a section heading on the right side of the actual section content. While keeping the logical HTML code order, you can actually visually reorder columns with these classes to your needs.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-palette-4-background-color has-background\" id=\"decorations\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Decorative classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-image-shape-1\/2\/3\/4<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on Image, Gallery or Media &amp; Text block, or even on Latest Posts or any WooCommerce block listing products, to apply a blob shaped decoration on images of the block. (Note that this may not work in all browsers &#8211; <a href=\"https:\/\/caniuse.com\/#feat=css-masks\">check the support<\/a>. If browser does not support the feature, no decoration is applied on images.)<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-decorative-overlay<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Use on any block to add a blob decorative overlay in the block&#8217;s bottom right corner.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Apply a custom helper CSS class listed below <a href=\"https:\/\/technicalsupport.blog\/2019\/01\/04\/how-to-add-a-custom-css-class-to-gutenberg-blocks\/\">in block editor<\/a>, in page builder, or directly in HTML code.<br \/>\n<br \/>\n<a href=\"#typography\">Text &amp; typography<\/a> | <a href=\"#layout\">Layout<\/a> | <a href=\"#decorations\">Decorations<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Text &amp; typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element&#039;s font size.Possible SIZE values: extra-small, small,\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/marioskontis.com\/el\/helper-css-classes\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"el_GR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Marios Kontis - gifts,handmade jewelry, paintings and frames.\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Helper CSS Classes - Marios Kontis\" \/>\n\t\t<meta property=\"og:description\" content=\"Text &amp; typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element&#039;s font size.Possible SIZE values: extra-small, small,\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/marioskontis.com\/el\/helper-css-classes\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-07-18T19:03:41+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-07-18T19:03:41+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marioskontis.kornizesdwra\/?locale=en_GB\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Helper CSS Classes - Marios Kontis\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Text &amp; typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element&#039;s font size.Possible SIZE values: extra-small, small,\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/marioskontis.com\\\/el\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#listItem\",\"name\":\"Helper CSS Classes\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#listItem\",\"position\":2,\"name\":\"Helper CSS Classes\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/#organization\",\"name\":\"Marios Kontis\",\"description\":\"gifts,handmade jewelry, paintings and frames.\",\"url\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/\",\"telephone\":\"+302104812432\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/marioskontis.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/cropped-site-circle-02-1.png\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#organizationLogo\",\"width\":512,\"height\":512,\"caption\":\"logo for icon\"},\"image\":{\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/marioskontis.kornizesdwra\\\/?locale=en_GB\",\"https:\\\/\\\/www.instagram.com\\\/marios.kontis.store\\\/\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#webpage\",\"url\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/\",\"name\":\"Helper CSS Classes - Marios Kontis\",\"description\":\"Text & typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\\\/center\\\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element's font size.Possible SIZE values: extra-small, small,\",\"inLanguage\":\"el\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/helper-css-classes\\\/#breadcrumblist\"},\"datePublished\":\"2020-07-18T21:03:41+03:00\",\"dateModified\":\"2020-07-18T21:03:41+03:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/#website\",\"url\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/\",\"name\":\"Marios Kontis\",\"description\":\"gifts,handmade jewelry, paintings and frames.\",\"inLanguage\":\"el\",\"publisher\":{\"@id\":\"https:\\\/\\\/marioskontis.com\\\/el\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Helper CSS Classes - Marios Kontis","description":"Text & typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element's font size.Possible SIZE values: extra-small, small,","canonical_url":"https:\/\/marioskontis.com\/el\/helper-css-classes\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/marioskontis.com\/el#listItem","position":1,"name":"Home","item":"https:\/\/marioskontis.com\/el","nextItem":{"@type":"ListItem","@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#listItem","name":"Helper CSS Classes"}},{"@type":"ListItem","@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#listItem","position":2,"name":"Helper CSS Classes","previousItem":{"@type":"ListItem","@id":"https:\/\/marioskontis.com\/el#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/marioskontis.com\/el\/#organization","name":"Marios Kontis","description":"gifts,handmade jewelry, paintings and frames.","url":"https:\/\/marioskontis.com\/el\/","telephone":"+302104812432","logo":{"@type":"ImageObject","url":"https:\/\/marioskontis.com\/wp-content\/uploads\/2022\/03\/cropped-site-circle-02-1.png","@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#organizationLogo","width":512,"height":512,"caption":"logo for icon"},"image":{"@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#organizationLogo"},"sameAs":["https:\/\/www.facebook.com\/marioskontis.kornizesdwra\/?locale=en_GB","https:\/\/www.instagram.com\/marios.kontis.store\/"]},{"@type":"WebPage","@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#webpage","url":"https:\/\/marioskontis.com\/el\/helper-css-classes\/","name":"Helper CSS Classes - Marios Kontis","description":"Text & typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element's font size.Possible SIZE values: extra-small, small,","inLanguage":"el","isPartOf":{"@id":"https:\/\/marioskontis.com\/el\/#website"},"breadcrumb":{"@id":"https:\/\/marioskontis.com\/el\/helper-css-classes\/#breadcrumblist"},"datePublished":"2020-07-18T21:03:41+03:00","dateModified":"2020-07-18T21:03:41+03:00"},{"@type":"WebSite","@id":"https:\/\/marioskontis.com\/el\/#website","url":"https:\/\/marioskontis.com\/el\/","name":"Marios Kontis","description":"gifts,handmade jewelry, paintings and frames.","inLanguage":"el","publisher":{"@id":"https:\/\/marioskontis.com\/el\/#organization"}}]},"og:locale":"el_GR","og:site_name":"Marios Kontis - gifts,handmade jewelry, paintings and frames.","og:type":"article","og:title":"Helper CSS Classes - Marios Kontis","og:description":"Text &amp; typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element's font size.Possible SIZE values: extra-small, small,","og:url":"https:\/\/marioskontis.com\/el\/helper-css-classes\/","article:published_time":"2020-07-18T19:03:41+00:00","article:modified_time":"2020-07-18T19:03:41+00:00","article:publisher":"https:\/\/www.facebook.com\/marioskontis.kornizesdwra\/?locale=en_GB","twitter:card":"summary_large_image","twitter:title":"Helper CSS Classes - Marios Kontis","twitter:description":"Text &amp; typography classes h1, h2, h3, h4 Styles the text the way H1, H2, H3 and H4 headings are styled. has-widget-title-style Styles the heading the way widget title is styled. has-left\/center\/right-text-align Apply on any element. Forces text alignment. has-uppercase-text-transform Transforms elements text to uppercase letters. has-SIZE-font-size Sets element's font size.Possible SIZE values: extra-small, small,"},"aioseo_meta_data":{"post_id":"26","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2024-02-29 05:31:21","updated":"2025-07-03 12:04:00","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/marioskontis.com\/el\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHelper CSS Classes\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/marioskontis.com\/el"},{"label":"Helper CSS Classes","link":"https:\/\/marioskontis.com\/el\/helper-css-classes\/"}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":0,"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"wp:attachment":[{"href":"https:\/\/marioskontis.com\/el\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}