Layout question

Hello Aigars

My site sandeepachetan.com uses the Travelify theme. I am looking for a single column layout for the individual posts on the site. But I want a combination of the “No Sidebar” and “No Sidebar, Full Width” layouts.

The images should be displayed in full width. And the text, as it is displayed in the “No sidebar” layout i.e. in the centre.

Is this possible to do with Travelify?

Thanks!

@sandeepachetan

The easiest solution would be to use full-width template for everything, so images would be displayed in full width but create an extra div with class and set width limit that to it.

It would look something like this

HTML part:

<img src="patch/to/your/image.jpg" class="full-width-image" alt="your image">

<div class="nosidebar-content">
	Your article body goes here
</div>

CSS part:

.full-width-image {
	max-width: 100%;
}
.nosidebar-content {
	width: 50%;
	margin: 0px auto;
}

This is only general idea how it can be done and it might require some tweaking to get the results you were looking for.

Thank you so much for such a quick response. Tweaking the code now. Will share the changes if I am successful in getting what I am looking for!

Thanks a ton!

Hello Aigars

Based on your reply, I made this change in the CSS. I didn’t want the width of the text reduced in mobile devices. So I added the last part. Do you think this could pose any issues wrt responsiveness?

.full-width-image {
	max-width: 100%;
}

.nosidebar-content {
	width: 70%;
	margin: 0 auto;
}

@media only screen and (max-width: 1023px) {
	.nosidebar-content {
		width: 100%;
		margin: 0 auto;
	}
}

I also wanted to ask if there was a possibility to have the images appear end to end to the width of the screen?

Thanks once again!

@sandeepachetan

Your code improvement with CSS media query should work perfectly on mobile as well. Of course the best thing to do here would be to run some actual tests but I don’t see any issues in code itself.

Great job! :slight_smile: