badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Wider images than paragraphs?

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 30, 2019 at 3:49 pm #66013
    jack3
    Participant

    Hiya,

    Is it possible to make the images wider than the paragraph text in the3 new WordPress, like this story https://www.bbc.co.uk/news/stories-49084230?

    Thank you

    Jack

    August 9, 2019 at 12:09 pm #66446
    Theme Horse Support Team
    Keymaster

    Hi @jack3,

    Sorry for late response due to some unavoidable circumstances. Please Update the theme to the latest Version. Its has got the Support for Gutenberg. The block features of New WordPress. Please login to your account to access the latest version of theme.

    Also to make the images wider than the content then please go to the Appearance > Customizer > Additional CSS and paste below custom css code:

    .page-template-default .col-lg-8.content-area .type-page .entry-content,
.page-template-default .col-lg-8.content-area .type-post .entry-content {
	padding-left: 70px;
	padding-right: 70px;
}
.page-template-default .col-lg-8.content-area figure.wp-block-image {
	max-width: calc(100% + 140px);
	margin-left: -70px;
	margin-right: -70px;
}
.page-template-default .col-lg-12.content-area .type-page .entry-content,
.page-template-default .col-lg-12.content-area .type-post .entry-content {
	padding-left: 150px;
	padding-right: 150px;
}
.page-template-default .col-lg-12.content-area figure.wp-block-image {
	max-width: calc(100% + 300px);
	margin-left: -150px;
	margin-right: -150px;
}
@media only screen and (max-width: 991px) {
	.page-template-default .col-lg-8.content-area .type-page .entry-content,
	.page-template-default .col-lg-8.content-area .type-post .entry-content,
	.page-template-default .col-lg-12.content-area .type-page .entry-content,
	.page-template-default .col-lg-12.content-area .type-post .entry-content {
		padding-left: 70px;
		padding-right: 70px;
	}
	.page-template-default .col-lg-8.content-area figure.wp-block-image,
	.page-template-default .col-lg-12.content-area figure.wp-block-image {
		max-width: calc(100% + 140px);
		margin-left: -70px;
		margin-right: -70px;
	}
}
@media only screen and (max-width: 767px) {
	.page-template-default .col-lg-8.content-area .type-page .entry-content,
	.page-template-default .col-lg-8.content-area .type-post .entry-content,
	.page-template-default .col-lg-12.content-area .type-page .entry-content,
	.page-template-default .col-lg-12.content-area .type-post .entry-content {
		padding-left: 50px;
		padding-right: 50px;
	}
	.page-template-default .col-lg-8.content-area figure.wp-block-image,
	.page-template-default .col-lg-12.content-area figure.wp-block-image {
		max-width: calc(100% + 140px);
		margin-left: -50px;
		margin-right: -50px;
	}
}
@media only screen and (max-width: 575px) {
	.page-template-default .col-lg-8.content-area .type-page .entry-content,
	.page-template-default .col-lg-8.content-area .type-post .entry-content,
	.page-template-default .col-lg-12.content-area .type-page .entry-content,
	.page-template-default .col-lg-12.content-area .type-post .entry-content {
		padding-left: 0;
		padding-right: 0;
	}
	.page-template-default .col-lg-8.content-area figure.wp-block-image,
	.page-template-default .col-lg-12.content-area figure.wp-block-image {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

    Thanks

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.