Themes global settings for responsive design?

Hello, @Nicolo,

Thank you for reaching out to us with your concern.

To assist us in understanding your request more thoroughly, we kindly ask that you provide us with screenshots illustrating the changes to the ‘Add to Cart’ button as it appears on various devices. Additionally, we would appreciate a detailed explanation of how these settings are influencing the dynamic content on your website.

For a more accurate assessment, please also include the URL of the pages where you are encountering the issue.

Furthermore, to ensure that we meet your expectations, we request that you describe your exact requirements or the objective you wish to achieve. We would appreciate it if you could create temporary wp-admin access and share the details via the private content area. This will allow us to review your settings and better understand the issue at hand and help you.

We kindly recommend that you take a complete backup of your site before proceeding.

We look forward to your response and are here to support you every step of the way.

Best Regards,
The 8Theme Team

Hello, Nicolo,

Thank you for getting in touch with us.

We kindly advise you to utilize the developer tools available in your browser to inspect the element in question. Detailed instructions on how to access and use these tools can be found at the following link: https://developer.chrome.com/docs/devtools/. This will enable you to view the CSS and styles associated with various media queries.
Read more – https://developer.chrome.com/docs/devtools/device-mode https://www.w3schools.com/css/css_rwd_mediaqueries.asp

To change font size you can use custom CSS code and add it in Theme Options > Theme custom CSS > select the desired device.

We hope this information is helpful.

Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Hello, Nicolo,

Please check the xstore folder > xstore.css file.
For example via the mentioned inspector: click here https://prnt.sc/eatqHBW-M34n and you will be able to see the file content – https://prnt.sc/J0xFiyAjFzeJ

Should you provide us with a description of your requirements and the desired outcome, we may be better positioned to assist you effectively.

Best Regards,
The 8Theme Team

Hello, Nicolo,

Thank you for your interest in our theme and basic styles. We understand that each client’s website has its own unique styles and element sizes. To accommodate this variability, we have created an additional shortcode that you can integrate into your child theme’s functions.php file, as illustrated in the following screenshot: [View Screenshot](https://prnt.sc/Wte-GooSQDT9).

Once you’ve added the provided code, you can utilize the shortcode [etheme_global_doc_styles] within a new WordPress Page, as demonstrated in the following screenshot: [View Screenshot](https://prnt.sc/wXFVieseOOHz).

Upon visiting the frontend of this page, you’ll have the opportunity to inspect the most fundamental elements generated by the shortcode: [View Screenshot](https://prnt.sc/x3dbtD60n6nn).

Here’s the code snippet for creating this shortcode:

add_shortcode('etheme_global_doc_styles', function() {
 ob_start();
 echo '<div class="content">';
  // Heading
  foreach (array('h1', 'h2', 'h3', 'h4', 'h5', 'h6') as $tag) {
   echo '<'.$tag.'>'.sprintf('This is text of <strong>%s</strong> tag', $tag).'</'.$tag.'>';
  }
  echo '<br/><br/>';
  // Paragraph
  echo '<p>'.sprintf('This is default text of <strong>%s</strong> tag', 'p').'</p>';
  echo '<br/><br/>';
  // Span
  echo '<span>'.sprintf('This is default text of <strong>%s</strong> tag', 'span').'</span>';
  echo '<br/><br/>';
  // Div
  echo '<div>'.sprintf('This is default text of <strong>%s</strong> tag', 'div').'</div>';
  echo '<br/><br/>';
  // Buttons
  foreach (array('light', 'black', 'active', 'bordered', 'disabled') as $btn_class) {
   foreach (array('small', 'medium', 'big') as $btn_size) {
    $local_btn_class = array($btn_size, $btn_class);
    echo '<button class="btn button '.implode(' ', $local_btn_class).'">'.implode(' ', $local_btn_class).'</button>&nbsp;&nbsp;';
   }
   echo '<br/><br/>';
  }
  foreach (array('small', 'medium', 'big') as $btn_size) {
   echo '<button class="'.$btn_size.'">'.$btn_size . ' Unstyled'.'</button>&nbsp;&nbsp;';
  }
  echo '<br/><br/>';
  // Inputs
  foreach (array('button',
   'checkbox',
   'color',
   'date',
   'datetime-local',
   'email',
   'file',
   'hidden',
   'image',
   'month',
   'number',
   'password',
   'radio',
   'range',
   'reset',
   'search',
   'submit',
   'tel',
   'text',
   'time',
   'url',
   'week') as $input_type) {
   echo '<div>'.sprintf('Input type <strong>%s</strong> is shown below', $input_type).'</div>';
   echo '<input type="'.$input_type.'">';
   echo '<br/><br/>';
  }
 echo '</div>';
 return ob_get_clean();
});

Feel free to integrate this shortcode into your WordPress setup, and should you have any further questions or require assistance, please don’t hesitate to reach out.

Kind regards,
8theme support team

Hello, Nicolo,

https://prnt.sc/t5WQ3ekmmNX6 – this is default padding from our theme, but this one is from the Elementor plugin https://prnt.sc/WR6OET7M3DPX

Regarding the question you mentioned, which we believe is related to the following screenshot – https://prnt.sc/s5z2n2tW6Og5 – it appears that Elementor has certain default padding values that are assigned within its settings. Upon further investigation, it seems that these were custom additions made by you or someone else on your site, through the Elementor Site Settings under Custom CSS, as evidenced by these screenshots: https://prnt.sc/rNQXsd4DQ0P_ and https://prnt.sc/k0OYvFTFdul2

Best Regards,
The 8Theme Team

Hello, Nicolo,

You’re welcome!

We’ve created screenshots for you – https://prnt.sc/TNtTaOaTcw0a https://prnt.sc/MsdvS946sPRP

Best Regards,
The 8Theme Team

Hi @Nicolo,

For the Typography headings, you can go the Theme Options > Typography > Overskrifter > select DM Sans font then set Variant, Line Height, Letter Spacing : https://prnt.sc/NrqalZdUTErm

After that, add the following custom CSS under Theme Options > Theme Custom CSS > Global CSS:

/* For Buttons */
.button,
.btn,
input[type="submit"],
input[type="button"],
form button,
form #qna-ask-input button {
font family: "DM Sans";
line height: 20.4px;
font style: medium;
font weight: 500;
margin-top: 40px !important;
}
/* For Headings */
body {
  --h1-size-proportion: 2.5714;
  --h2-size-proportion: 1.7142;
  --h3-size-proportion: 1.7142;
  --h4-size-proportion: 1.2857;
  --h5-size-proportion: 1;
  --h6-size-proportion: 0.8571;
  --h1-line-height: 1.2;
  --h2-line-height: var(--h1-line-height);
  --h3-line-height: var(--h1-line-height);
  --h4-line-height: var(--h1-line-height);
  --h5-line-height: var(--h1-line-height);
  --h6-line-height: var(--h1-line-height);
}

For the Paddings, please add this custom CSS:

h1, .h1,
h2, .h2 {
margin-bottom: 24px !important;
}

h3, .h3 {
margin-bottom: 16px !important;
}
.xstore-sections {
padding: 120px 0 !important;
}

For each section, please add the xstore-sections class to the CSS Classes of each section:

https://prnt.sc/cgu000b25_ho

Best Regards,
The 8Theme Team

Dear Nicolo,

We’re writing to inform you that the default style definitions for the XStore theme are located within the following directory: wp-content/themes/xstore/xstore.css. Specifically, you may wish to review the code between lines 20 and 109, which outlines the foundational CSS properties for the body element.

Below is an excerpt from the mentioned section for your reference:

body {
  --et_font-color: #555;
  margin: 0;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Verdana, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: var(--et_font-color) !important;
  height: auto !important;
  background-color: var(--et_container-bg-color, transparent);
  --product-stock-step-1-active-color: var(--et_green-color);
  --product-stock-step-2-active-color: var(--et_orange-color);
  --product-stock-step-3-active-color: var(--et_red-color);
  --h1-size-proportion: 2.5714;
  --h2-size-proportion: 1.7142;
  --h3-size-proportion: 1.7142;
  --h4-size-proportion: 1.2857;
  --h5-size-proportion: 1;
  --h6-size-proportion: 0.8571;
  --h1-line-height: 1.2;
  --h2-line-height: var(--h1-line-height);
  --h3-line-height: var(--h1-line-height);
  --h4-line-height: var(--h1-line-height);
  --h5-line-height: var(--h1-line-height);
  --h6-line-height: var(--h1-line-height);
  --product-title-size-proportion: 1.14;
  --product-title-line-height: 1.5;
  --et_main-color: #888;
  --et_dark-color: #222;
  --et_active-color: #a4004f;
  --et_red-color: #c62828;
  --et_green-color: #2e7d32;
  --et_blue-color: #1565c0;
  --et_orange-color: #f57f17;
  --et_yellow-color: #fdd835;
  --et_border-color: #e1e1e1;
  --et_light-color: #f7f7f7;
  --et_light-color2: #f2f2f2;
  --et_white-2-dark: #fff;
  --et_dark-2-white: #222;
  --et_select-arrow-closed: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEm0lEQVR4nO3cWaiUZRgH8N85armShlgWLZS0gLQgIVm0UGQgtEBKe110IdSFF0FXhtCNChERFLSQFBUltEC0ZxS0E7QZ0UJEG6aFltmiOV28c3DpvO+cZWa+c+Z7fjAo58x87/99HuSceb9nJIQQQgghhBBCCCGEEEIIIYQQQgghhBBCO01o/nkYrsRp+B7bK0tUL7NwFRZhM7bCOfgdjebjl+bXQmediy321H07ToeP9vriwGMHFlcSsx4ulGq8f92fhm2DfKOBv3BRBWF73cVSbQer+cvwbOabDfyDZV2P3LuWSTXN1ftGOBY/Fp60C9d0OXgvulaqZa7OD6Nv4MlH4svCk3djRfey95wVUg1z9b3TXs0YcCg2Fl7UwMrOZ+85tyrX9HaDNGPAIfi4xQVWdy57z1mtXMtVQ7nILLzX4kJr25u7J61VruEtw7nYTLzd4oL3oL892XtKv1Sb0s/jm0dy4enYULhwA/eKpuytH/fJ1+tfLB/NAlOlNyulpjyKiaNZpEdMxGPKzbihHQtNwQuFhRp4ApPasdg4NUmqQa4+O3F5Oxc8AE8WFmxI7/gnt3PRcWKy1qcdSzux8CSsLyzckP4lTenE4mPUdLwmX48/saSTASZgXSFAA69jRidDjBEz8IZ8HXZIp7od14/7C0Ea0vuYg7sRpiIH4335/f+Gs7oZqE86fyk15QPM7maoLpkt7S237204o4pgfdI5TKkpGzG3inAdMhefye93CxZUlq5plXJTPsfhVYVro8OlveT2+TNOqSzdfm5Rbso3OKaydKN3jLSH3P5+wAmVpcu4WfnM/1vMqyzdyM2Tsuf29R2OqyxdC8ulI4Jc+J8wv7J0wzdfypzbz1c4qrJ0Q3SDclM24aTK0g3dyVLW3D6+wBGVpRumK6Tzm9xmfsXCytK1tlDKmMv/iXQzb1xZqjxhsVWa2BtrFknZcrk/xJzK0o3SEuk8J7e57TivsnT/d76UKZf3Henm3biWm9IbePyBCypLt8di5Zxv4qDK0rXZ2dL5Tm6zf+OSytJxaTNDLt8rmFZZug45U35stSH9vLmsglxXK/8C8qJ057QnLbDvxPf+j124rot5rleeJnxKujnX006VPguRK8JuzRnXDrtJ+WRhvRrdlj5ROv8pNaWTo6utRjvX2fNhpto4XjoHyhWloTOjqytbrPmAGo82HY2vlQvUztHVVqOdgw49102ryfsG1rRhnVajncWh57o5FJ8qF+xuIytYf/O1pWuvGlX6HjXH4J933Psx3NHV/uZrStcc1tBz3czCu8oFfMTQRlcnSmOupd/kRjT0XDcz8ZZyUx5Xfo/QarRz1EPPdTMNryo3JTe62mq0s21Dz3UzFS8pN+V5+46uthoM3yndPAsjdCCeUW7KwOjqjObfc8/r2NBz3UzBc8pN2aA89Byft2+zCdLnuEtNyT26NvRcNxPwoOE1o+tDz3XTh7sMrRmVDT3XTR/uUG7GmBh6rpvbDN6MMTX0XDdr7NuMzdIdyXGrF46bF0u/RW3CQ9L/bBRCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYD/AI5xCCmGn2cGAAAAAElFTkSuQmCC);
  --et_select-arrow-opened: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEZUlEQVR4nO3caYhVZRgH8N+oaWmbIWULUhS0UbQQtFFJEUXRSoRaZHvUB8EWPxgl9UVaKGmPVioKKjNB2omKooUiKpE2kXZbtE3LvQ/n3hxz3vfc0Xvvae59fnBgYO457/99nznn3jnznCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQjP1VB2gCUbj5NrXs7CwwixdbywWYU1t+wVHVRmom52KZdYWo74twykV5upKZ2Gl9YtR35bj9MrSdZlz5ItR31bi7Ioydo3LsFp5MXoX5dxKknaBSfpXjPq2WlHI0ERlZ8a7tS31/VW4oO2pO9R0+TPgJQzHiNrXuddObXP2jlNWjGcxrNfrN8PzJftc26bsHaUHt8sv7NMY2se+QzGzZN/prY3fWQbhbvkFfQSDM8cYUntN7hg3tiZ+ZxmCR+UX8gH5YtQNxoMlx7pLZ9zPa4kheFx+AW/TvwVs5NJ3r+KsDL0Mw2z5hbvFhv0099T2zR37McUPRMCmmCO/YNc1YZzrS8Z4QhTF5nhVfqGmNHG8KSVjzbbux+iusgVel1+gK1sw7lUlY85RnLVdZRvltzouaeH4l8rfinlO8UtmVxiF9+WLcWEbclxUGyuV4zXFWdzRtsdc6UVYgXFtzDO+NmYqzxvYso152mpHzJOe/HKcUUGuM2tjp3K9p7jEdpRdMF960n/hhMrScSL+7iNXfftAcantCLtigfRkl+K4qsL1crwiSyrnXMUld0DbC99JT/J3HFFZuvUdiT+k887DDpWl20j74Afpyf2KwypLl3Y4fpPO/Sl2qizdBjrIug1s/91+xgGVpSt3oCJjKv8CxaV4QDgYi6Un8yP2qyxd4/bHT9Lz+Aq7VZauQWPlr8HfYI/K0vXfnvhWej7fY+/K0pU4Bkukw89XfPwdaHbH19LzWoh9K0uXcJL85/jPMaaydBtvZ3wpPb9FivfN/4VU03N9+0TxyMBANwafSc9zseL9s1JlTc8fYbvK0jXfaHws/1H+0KrCTZQvxjsYWVW4FtoWH0rP+08c3e5QZa2db2Hrdodqo5F4W3r+S3Bsu8KUNT2/omjr7HRb4U3pdVhm7aN2LXN1JsAavKjos+0WI/CyfFFOa9XgZX22s3Rng8BwvCC9Li15cKisGE/pu8+2WwzFM/JFmdiMgXpwR2agNXhYY62dnW4TPCm9Thv94NAg3JMZYA3uF8XobTAeki/KpA05cCNNzzNEo3JfBuE++aJM7s8BG2l6vlkUI6cHt8qv4TWNHKiRpudpTY3euXpwk/xaZh8caqTpuZl9tt1imvya3tDXTmVNz6txRWtzd7SyJu879XoLGCL/oGQUozmmyhfl30fsLs+8KB66b67J8vcBx5O+F7MK57c9cufLdd7PoO9f/lZgQgVhu8V5+v5b0gSKTrzenRVLxb82aodxis7N+rrPxOD6O/soXKy4nfyIomUytN4oHIIvxJqHEEIIIYQQQgghhBBCCCGEEEIIIYQQQkv8A07d/ovDcJx+AAAAAElFTkSuQmCC);
  --et_404-page-bg-image: url('../../images/404.png');
  --et_link-color: var(--et_dark-2-white);
  --et_link-hover-color: var(--et_main-color);
  --et_btn-color: var(--et_dark-2-white);
  --et_btn-bg-color: var(--et_light-color2);
  --et_btn-br-color: var(--et_light-color2);
  --et_btn-color-hover: #fff;
  --et_btn-bg-color-hover: var(--et_active-color);
  --et_btn-br-color-hover: var(--et_active-color);
  --et_btn-bordered-color: var(--et_dark-color);
  --et_btn-bordered-bg-color: transparent;
  --et_btn-bordered-br-color: var(--et_border-color);
  --et_btn-bordered-color-hover: var(--et_dark-color);
  --et_btn-bordered-bg-color-hover: #fff;
  --et_btn-bordered-br-color-hover: var(--et_border-color);
  --et_btn-active-color: #fff;
  --et_btn-active-bg-color: var(--et_active-color);
  --et_btn-active-br-color: var(--et_active-color);
  --et_btn-active-color-hover: #fff;
  --et_btn-active-bg-color-hover: var(--et_active-color);
  --et_btn-active-br-color-hover: var(--et_active-color);
  --et_btn-light-color: #fff;
  --et_btn-light-bg-color: var(--et_btn-bg-color);
  --et_btn-light-br-color: var(--et_border-color);
  --et_btn-light-text-transform: uppercase;
  --et_btn-light-color-hover: #fff;
  --et_btn-light-bg-color-hover: var(--et_active-color);
  --et_btn-light-br-color-hover: var(--et_active-color);
  --et_btn-dark-color: #fff;
  --et_btn-dark-bg-color: var(--et_dark-color);
  --et_btn-dark-br-color: var(--et_dark-color);
  --et_btn-dark-color-hover: #fff;
  --et_btn-dark-bg-color-hover: #4c4c4c;
  --et_btn-dark-br-color-hover: #4c4c4c;
  --et_dark-2-white-0: rgba(0, 0, 0, 0);
  --et_dark-2-white-01: rgba(0, 0, 0, 0.1);
  --et_dark-2-white-02: rgba(0, 0, 0, 0.2);
  --et_dark-2-white-03: rgba(0, 0, 0, 0.3);
  --et_dark-2-white-08: rgba(0, 0, 0, 0.8);
  --et_dark-2-white-002: rgba(0, 0, 0, 0.02);
  --et_white-2-dark-0: rgba(255, 255, 255, 0);
  --et_white-2-dark-01: rgba(255, 255, 255, 0.1);
  --et_white-2-dark-05: rgba(255, 255, 255, 0.5);
  --et_white-2-dark-07: rgba(255, 255, 255, 0.7);
  --et_white-2-dark-09: rgba(255, 255, 255, 0.9);
  --et_dark-2-light-dark: var(--et_dark-color);
  --et_white-2-light-dark: #fff;
}

Please feel free to modify these styles using the custom CSS codes that were provided in our previous correspondence.

Should you require any further assistance or have additional questions, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Dear Nicolo,

Greetings.

We regret to inform you that in order to create a style guide similar to the example you have provided, it would be advisable to engage the services of a professional web designer or front-end developer.

Please note that all theme styles can be found in the following locations:

– Within the file: /themes/xstore/xstore.css
– Inside the directory: /themes/xstore/css

Thanks for understading!

Best regards,
The 8Theme Team