I am trying to at a margin-top to a section below the header on my website but cant seem to identify the correct class or id needed to work on the specific section area. Any help with this issue would be greatly appreciated as I cannot find an answer to this anywhere so far… I am using Shopify css/html to make these customizations to my store
<div class="wrapper">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2 class="h1 section-header__title"></h2>
</div>
{% endif %}
<div class="grid collection-grid">
</div>
{% comment %}
Show up to 9 collections.
Frontpage will be excluded if collections defined automatically.
{% endcomment %}
{% assign isEmpty = true %}
{% assign collection_index = 0 %}
{% assign collection_count = 0 %}
{% assign collection_limit = section.blocks.size %}
{% comment %}
Add one to the collection limit to offset chance of Frontpage being included
{% endcomment %}
{% assign collection_limit = collection_limit | plus: 1 %}
{% comment %}
Calculate number of collections to show, making sure Frontpage isn't one
{% endcomment %}
{% for collection in section.blocks limit: collection_limit %}
{% assign collection_count = collection_count | plus: 1 %}
{% endfor %}
{% if collection_count > 0 %}
{% assign isEmpty = false %}
{% endif %}
{% assign divisible_by_three = collection_count | modulo: 3 %}
{% assign divisible_by_two = collection_count | modulo: 2 %}
{% comment %}
Loop through the collections to display
{% endcomment %}
{% for block in section.blocks limit: collection_limit %}
{% assign collection = collections[block.settings.collection] %}
{% assign collection_index = collection_index | plus: 1 %}
{% assign collection_handle = collection.handle %}
{% include 'collection-grid-collage' %}
{% endfor %}
{% if isEmpty %}
<div class="wrapper">
<div class="grid">
<div class="grid_item">
<div class="rte text-center">
{{ 'home_page.onboarding.no_content' | t }}
</div>
</div>
</div>
</div>
<style>
.ShopifySection > div{;
margin-top: -700px;
padding: 70px;
}
</style>
</div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Collection list",
"max_blocks": 9,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collection list"
}
],
"presets": [{
"name": "Collection list",
"category": "Collection",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"id": "collection",
"type": "collection",
"label": "Collection"
}
]
}
]
}
{% endschema %}
I’m not au fait with the scripting language you’re using, but one thing I see is that
<style>
.ShopifySection > div{;
margin-top: -700px;
padding: 70px;
}
</style>
should be in the <head> section of your page, not the <body>.
As much as I’m not too comfortable with the idea of style in the body, it is now valid html. It may appear in either the head or body.
The
<style>element can be included inside the<head>or<body>of the document, and the styles will still be applied, however it is recommended that you include your styles in the<head>for organizational purposes — it is a lot better to separate your content from your presentation as much as possible. Even better, put your styles in external stylesheets and apply them using<link>elements.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
3 Likes
That looks very much like a magic number and I can’t see that being robust enough for any situation. It may work if you have a fixed header of exactly 700px height and you want to drag something up but there are so many things that could go wrong with it.
We’d really need to see the page to see if what you are attempting is possible or not or maybe another method would be better.
1 Like
If you provided enough information about your site/page (like the actual code - a link to the site), I’m sure someone here could figure out how get a margin-top below the header for you. However…
I would think that a company like Shopify who sells a custom product publishes instructions telling customers how to use their product.
As a next resort, I would recommend searching for “Shopify” using your favorite search engine and see if it finds any user groups or forums where you can find help with the Shopify platform.
Please consider that we do HTML and CSS (as the category says). We do not necessarily do proprietary frameworks with non-standard scripting code. If you expect help with proprietary web software, you would probably be better off finding help closer to the source.
Thank you very much for your reply, I did end up figuring the issue out!
(1) Can you explain what you found to be the problem?
(2) What adivce would you give someone else who reported a similar problem that might help them solve it?
1 Like
Thank you all for your help regarding this topic! I was successful in my attempt to edit the desired section. I guess the only other thing related to this topic that I am still wondering is if there are any tricks to figuring out what class I need to reference in order to style an element? For example, In this scenario, I was attempting to change the margin of my newsletter section however it was not working when I was using the .newsletter class although that’s the newsletters sections reference in the newsletter.liquid file. It ended up working when I changed .newsletter to .header Anyone know why this is? is this some kind of trick so people cannot customize their free themes default settings?
P.S I did use inspect element to find the class but it was not the correct class for some reason as stated above
Right-click on a part of the web-page that you want to style, and select “Inspect element” in Firefox or just “Inspect” in Chrome. You will see the html as well as the specific styles that affect that particular element. So you can use that to help you figure out what changes to make.
Well is seems that I was referencing the wrong class for the formula so no changes were being made however I used inspect element to find the class that I needed to reference so not sure why it wasn’t working. It ended up working after I changed the .newsletter > div{ TO .header >div{
I explained in a little more detail below. that was the issue and it was resolved however the topic is still on going as I am having this same difficulties with other sections… I can seem to find the correct class to use to identify the elements I want to work on even when using the inspect element.
See that’s were my issue is. I use inspect element all the time and never had a problem but for some reason with shopify, the inspect element is identifying the wrong class. For example, with this issue, the class was “Newsletter” & also “section-header” although neither of those worked to style the section… After a lot of messing around and refreshing the page it finally worked when I identified the class as .header! Which was not shown in inspect element… very strange and never had that issue
My guess is that there is some “templating magic” going on. You should probably study the documentation as much as you can and use inspect to determine the computed output when you need to.
Ya that’s exactly what it seems like! I am definitely at a beginners level with html and css, sorry to bug you again but can you point me in the right direction regarding what topics I can study to help me with something like that? IS there anything area of education that could help the most with template magic haha or identifiers etc… Most of my time is spent trying to identify the right element and its taking way longer than it should 
The publisher’s documentation! Seriously.
Since you don’t have a strong background with HTML and CSS, then take a course in HTML and CSS, too. But only the publisher knows the tricks to working with his product and I imagine that he expects you to have at least a modest understanding of HTML and CSS.
IMHO only 14 days free seems woefully inadequate considering all the documentation there is. I would need to lock myself to my computer and go without sleep!
Anyway, this might be a good place to start
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.