Styling your blog articles

We use default css styling to help provide structure to your Blogity articles.

You can easily override these styles using the theme editor. Our CSS classes can be extended to align nicely with your theme and provide you the control over your article.

Default styles

The default css styles are provided below.

.blogity--block {
  padding: 15px 0;
}

.blogity--video-column-block,
.blogity--text-column-block,
.blogity--image-column-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 768px) {
  .blogity--video-column-block,
  .blogity--text-column-block,
  .blogity--image-column-block {
    grid-template-columns: 1fr;
  }
}

.blogity--video-column-block iframe,
.blogity--image-column-block img {
  width: 100%;
  height: auto;
}

.blogity--divider-block {
  border: 0;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background: #eee;
  margin: 0;
}

.blogity--text-block {
}

.blogity--heading-block {
}

.blogity--image-block {
}

.blogity--video-block .blogity--video-block-align-left,
.blogity--image-block .blogity--image-block-align-left {
  text-align: left;
}

.blogity--video-block .blogity--video-block-align-center,
.blogity--image-block .blogity--image-block-align-center {
  text-align: center;
}

.blogity--video-block .blogity--video-block-align-right,
.blogity--image-block .blogity--image-block-align-right {
  text-align: right;
}

.blogity--video-block .blogity--video-block-align-full iframe,
.blogity--image-block .blogity--image-block-align-full img {
  width: 100%;
}

.blogity--video-block-caption,
.blogity--image-block-caption {
  width: 100%;
  text-align: center;
}

.blogity--pull-quote-block {
  padding: 15px 0;
}

.blogity--pull-quote-block-content {
  min-height: 100px;
  font-style: italic;
  text-align: center;
}

.blogity--pull-quote-block hr {
  margin: 30px 0;
}

.blogity--quote-block {
  border-left: 3px solid #e8e8e8;
  padding: 5px 0;
  padding-left: 25px;
}

.blogity--video-block {
}

.blogity--video-column-block iframe,
.blogity--video-block iframe {
  border: 0;
  border-radius: 5px;
}

.blogity--video-block iframe {
  min-width: 540px;
}

@media (max-width: 768px) {
  .blogity--video-block iframe {
    min-width: 100%;
    width: 100%;
  }
}

.blogity--aspect-16_9 {
  aspect-ratio: 16 / 9;
}
.blogity--aspect-4_3 {
  aspect-ratio: 4 / 3;
}

.blogity--column-block-order-1 .blogity--column-block-order-target {
  order: 1;
}
.blogity--column-block-order-2 .blogity--column-block-order-target {
  order: 2;
}

You can copy the css selectors you wish to override into your theme.css file and make the necessary changes you manage how your article appears.