How do I remove extra white space on my Canopy theme?

[Kelleycap]

Hi Experts!

All of the images and headers have extra white space at the top and bottom of my Canopy theme. Is there a way to remove this? Please see below.

I would like it to look more like this…

I am a novice at editing code. Here is the code from the theme.liquid CSS

{% if settings.favicon != blank and settings.favicon contains ‘.png’ %}

{% elsif settings.favicon != blank and settings.favicon contains '.ico' %} {% endif %} {{ page_title }}{% if current_tags %} – {{ 'general.meta.tagged' | t }} "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{% render ‘social-meta-tags’ %}

{{ ‘styles.css’ | asset_url | stylesheet_tag }}

{{ ‘//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’ | script_tag }}

{{ content_for_header }}

% schema % {{ 'general.accessibility_labels.skip_to_content' | t }}

{% section ‘cart-drawer’ %}

{% section 'header' %} {{ content_for_layout }}

{% section ‘footer’ %}

{{ ‘vendor.js’ | asset_url | script_tag }}
{{ ‘theme.js’ | asset_url | script_tag }}

Any help is greatly appreciated!

Thanks,

Kelley

[UmairA]

Hi @Kelleycap ,

Yes possible. Please share your store URL.

[dmwwebartisan]

@Kelleycap

Please share your website URL. I will check and provide a solution here.

Thanks!

[Kelleycap]

bohemianfrills.com

[Kelleycap]

My URL is https://bohemianfrills.com

[Kelleycap]

I would like my site to look like this. How many hours would it take to change some of the code to remove the extra white space throughout the site and also move the search box and cart to the location shown on these examples?

[SeaBonesLIfe]

Hey…
If you are familiar with editing the code for the theme, under Assets you’ll see “styles.css.liquid”.

That section is around line 3209. You’ll notice margin-top and margin-bottom with a value in “em”. Lower whatever number you see until you like the look.

.template-index #content .section--larger-spacing {
  margin-top: {{ section_padding | times: 1.5 }}em;
  margin-bottom: {{ section_padding | times: 1.5 }}em;
  padding-top: 0;
  padding-bottom: 0;
}

Hope this helps!

[dmwwebartisan]

@Kelleycap

Please add the following code at the bottom of your assets/styles.css file.

.template-index #content .section--larger-spacing {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}

I can see your screenshot you have shown that you would like to header also. To do so we will have to customize the header. Unfortunately, there is no simple solution otherwise I will be happy to help you. I would suggest hiring a Shopify expert to assist you OR feel free to contact me.

Thanks!

[Kelleycap]

Great! That worked. Thank you! I changed the “em” to -.5 to get the look I want. It only changed it on the home page between the slide show and the collection images, however. I would also like to tighten up the spacing a little bit on the home page in these areas as well as shown in red below.

Additionally, I would like the spacing on the collection pages to look more like this as shown below. The space around the collection name is too large the way it is now.

[SeaBonesLIfe]

Are you by chance familiar with Google Development Tools in Chrome? If not, here is a real quick tutorial, and this will assist you further in customizing your site.

https://youtu.be/1l4xz1QQhew

To fix what you were inquiring about, look at line 3202 in the same styles.css.liquid. You’ll see this element (.template-index #content .section). Play around with the em as you did with the first section.

And so you know what an “em” is, and why you’re changing this value, here is information from W3schools.com, with the opportunity to try different things out. It’s truly a valuable resource!

https://www.w3schools.com/cssref/css_units.asp

Good luck!

[Kelleycap]

Great tutorial! I will try this out. Thank you!