How to minimize blank space on product pages?

[spkhan]

Hi,

I am using the refresh theme. I have a lot of blank space above FAQ on all of my product pages. How do I reduce this space?

Sarah

[Yeady123]

To reduce the blank space above the FAQ section on your product pages, you'll need to make some changes to the CSS code of your theme. Here are the steps to do that:

• Go to your Shopify Admin, then click on "Online Store" and then "Themes."
• Find the theme you're using and click on "Actions" and then "Edit code."
• In the "Sections" folder, find the file named "product-template.liquid." This is the file that controls the layout of your product pages.
• Look for the section of the code that controls the FAQ section. This may be in a separate file within the "Sections" folder, or it could be within the "product-template.liquid" file itself.
• Once you've found the section of the code that controls the FAQ section, you'll need to adjust the CSS code to reduce the blank space above it.

Here's an example of what the CSS code might look like:

.faq {
  padding-top: 40px;
}

To reduce the blank space, you can change the value of "padding-top" to a smaller number. For example:

.faq {
  padding-top: 20px;
}

Save your changes and refresh the product page to see the results. If you're not satisfied with the results, you can adjust the value of "padding-top" again until you get the desired amount of blank space.

Note: It's always a good idea to make a backup of your theme before making any changes, so you can easily revert back if needed.

[spkhan]

Thanks, how do i make a backup of my theme?

[spkhan]

This is what I see in file collapsible-content.liquid

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

How do I edit that?