Hello! I’m new to the forum and was directed here by Tech Support.
I’d like to reduce the size of the left-hand side margin on my blog text. I searched for it in the CSS style sheet but cannot find it. Any help would be much appreciated, thanks!
Jim
You will want to use the developer console that you can find in most browsers (ctl+shift+i or cmd+shift+i). Click the element selector in the top left of the console and use it to select the text. As you hover over it you will see organge for margin, green for padding.
With the element selected, the right side of the console should display all css related to that element. You can find the css that is creating the spacing, change it here (the change will revert back when the page is refreshed so use this feature to find the setting you like).
Find the css that is creating the spacing and in the top right you will see a file name. This is the file in your cos that the css exists in. once you find setting you like you can just copy the css identify for the block of css, go to the file, click into the file and hit ctl+f or cmd+f, paste in the css identifier and the page will jump to the css in you css file. Make the change, save, and you done.
I couldn’t tell you exactly what to do, only how to do it, because there could be any number of reasons why the spacing exists. Without looking at the actual page there is no way to know what to do.
If you require a left margin then you should add margin-left to the css. You could over right all margins by using just margin: x x x x; however it could require you to use an important tag or at least track down the current margins code and delete it so that you don’t have overwrite issues. The easiest solution is to just add margin-left, margin-top, margin-bottom as needed.
I think I got it.
Is it common/OK to put a negative margin on it like this?
Thanks so much for the help,
Jim
Negative margins are useful in certain situations but it’s considered poor practice as a work around to issues that have smarter solutions. If it works and your happy with it on desktop, mobile, and tablet then by all means let it ride, but understand that, because you have to apply a negative margin on an element, it is not the margin on that element that is causing the spacing. It is most likely the the margin or padding of an element wrapping the element you have applied this negative margin to.
If you would like to share a link I can problem solve the spacing for you.
Yeah, that’s what I thought, which is why I asked…
I’ve tried adding it further up in the COS Structure content, but it’s just not moving the text over like I want… the only place it has an effect is in the content body container, but 1 - I still need to specify negative pixels, and 2 - it moves the sidebar over too which I don’t want.
The blog is not published yet, so not sure if you can access it?
Thanks again for all the help on this.
Jim
You can share a preview link for the post with me. The link you shared was directly to your portal so I could not access it.
Ugh, I figured (wasn’t sure if you had access to the portal like some of the tech support guys do). My blogs aren’t previewing because I haven’t pointed my website CNAME to the new blog URL. I haven’t done that because the blogs don’t look right yet. I’m just stuck in the transition right now… (edit: I’m only moving my blogs over the hubspot, not the entire website).
Somebody at Hubspot created my COS template, and they are the ones who created the left margin the way it is. I just want to move the blog text to the left the correct way. That’s it. I’m sure they could update this in 2 secs, but I feel like they just gave me a template and walked away. Is this typical HS tech support?
If I take the design training class, would it teach me how to do this? Or do I need to go get baseline knowledge in CSS, then take the HS design training?
Your site pages should be accessible on a sandbox domain provided by hubspot if you don’t have your domain set up. You may need to go to content->content settings-> blog settings(right sidebar menu) and change your blog url to the sandbox domain in order to access a preview but generally, in my experience, the blog is automatically set to this domain and clicking the eyeball on the left side of the post editor should open a preview page no problem out of the box.
If you can figure it out I will still look at it.
Anyways, it doesn’t matter what cms, cos, etc. that you use. Even if you were to use adobe muse you will still need at least a rudamentary understanding of html and css. Hubspots design cert won’t teach you html and css, only how to use the template builder. It is still good knowledge to have but I always tell people that, without the ability to build a website from scratch, Hubspot has a steap learning curve with development. No different than WordPress templating. You could go somewhere like codecademy.com to learn html and css.
I can’t really comment on Hubspot’s onboarding process. I have built closed to 100 websites in Hubspot (or at least feel like it) including my own but because I am an agency partner I take responsibility for the onboarding and request that no templates are provided by Hubspot. In my experience jumping into after onboarding project, Hubspot builds out your current site error for error meaning that if it is broken on your wordpress site then it is going to be broken on your Hubspot site as well. I would imagine They just added your header to a default layout. I do not know though.
Ya, I obviously jumped the gun on updating the blog URL… I reverted back to the sandbox domain. The preview is here: http://fastwayengineering-3062093.hs-sites.com/cad-cae-timeline-history?hs_preview=LPDNFuBR-5198262613
Roger that on the html/css training, thanks for notes.
FYI, you’ll notice the tableau data viz script in this blog - this is the reason I am playing with the margins, because I want it to render a little bit wider so it’s easy to read. I figured I might as well take it from the left margin (I intend to add some stuff to the right side), and apply it to all blogs, since I want to do some more tableau data viz’s (this has been my most popular blog by 100x more traffic than my other blogs).
I found the issue. It isn’t margin or padding, it is width. Your “blog-section” container is set to a width of 74% and floated right.
You can do a couple of things:
1. change the width to 100%
2. for a little more space between the content and the sidebar, change the width to something like 95% and change float to left.
here’s the current css:
.blog.hs-blog-post .blog-section {
position: relative;
width: 74%;
float: right;
margin-right: 4%;
}
*EDIT: Sorry about this, be aware of the margin right. Either zero it out or subtract it from your width percetage. Your actual width will be (width + margin) so 100% + 4% will equal 104%.
Awesome, thanks, @Jsum! I just set it to 100% & 0% for now. I’ve got other tweaks I want to make, but I’ll save those for after I learn a little more about HTML/CSS.