Jump to content

Storefront Bootstrap Code Causing Misalignment

Recommended Posts

Site URL: https://www.takebackyourcareerpodcast.com/coaching

Hi there,

I am attempting to build a basic storefront on my site. I've inserted an HTML code block and have the following code inserted. The page looks the way I want and functions properly. The only problem is that the block doesn't center with the page. I am having issues with the bootstrap aspect and am unsure what to do to center the column on my page. The entire HTML block is off to the right-hand side of the page instead of being centered. I'd like to be able to add more columns/div sections and ensure they're always centered.

Pic attached for reference.

Password: boots135

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/782852/assets/styles.css?1607200833886045" />
  
<!-- Section 1 -->

<div class="col-md-3">
  <a href="https://www.google.com" class="card section--light" style="text-align: left;background: #ffffff;">
    
      <img class="card--img" src="https://news.blr.com/app/uploads/sites/3/2019/06/Coaching-03.jpg"/>
    
    <div class="card--body">
      <h1 class="card--title" style="font-family:brownmax;" "text-align: center">Coaching — 60 Minutes</h1>
      <p class="card--description" style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
      <h1 class="card--price" style="font-family:futura-pt;" "text-align: justify">$99.00 USD</h1>
    </div>
  </a>
</div>

 

Screen Shot 2020-12-19 at 11.54.46 AM.png

Link to comment
  • Replies 4
  • Views 595
  • Created
  • Last Reply
1 hour ago, tuanphan said:

Add to Home >Design > Custom CSS


[data-section-id] {
    display: flex !important;
}

 

This is great and it centered the content. Thank you! I have a follow-up question now... the HTML/Code block is quite far down the page. Is there some CSS that will help me bring the block to the top the section?

Thanks again.1849502646_ScreenShot2020-12-21at10_09_18PM.thumb.png.c2ae1393dbcd4248be3f662283cab6e1.png

 

 

Link to comment
  • 2 weeks later...
On 12/22/2020 at 10:09 AM, gogreenmsu said:

This is great and it centered the content. Thank you! I have a follow-up question now... the HTML/Code block is quite far down the page. Is there some CSS that will help me bring the block to the top the section?

Thanks again.1849502646_ScreenShot2020-12-21at10_09_18PM.thumb.png.c2ae1393dbcd4248be3f662283cab6e1.png

 

 

Hi. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
13 hours ago, tuanphan said:

Hi. Do you still need help on this?

Hi @tuanphan

I removed the code from my site in favor of something else. I think I will be adding it back in though for a different site. If so I will bug you for your help.

Thank you for now!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.