Layout Tricks: Breakout Images

Support
#1

Hi,

I am try to follow the official Themeco YouTube tutorial, where one image in a 2 columns can expand to the edge of the screen, but the CSS code doesn’t seem to produce any effect.
I have tried to clear cache, and remove other CSS codes I had, but none helped.

@media (min-width: 979px) {
.widescreen .x-col .x-bg {
width: calc(50vw - 1rem);
}

.widescreen .x-col:nth-child(odd) .x-bg {
left: auto;
right: 0;
}
}

Can you help?

#2

Hi @breix,

The setup of the tutorial is different from the setup of your column, that is why the steps didn’t work.

Instead of adding the image as an image element to the second column, set the image as the column background instead.

Hope this helps.

#3

Thank you.
Yes, it helped but only for the image on the right.
For some reason, with the image on the left it doesn’t produce the same effect.

#4

Hey @breix,

I tested in my local setup and it works for both sides. To make it work simply duplicate your About Me section and swap the columns so the background image will be on the left side. You can then replace the background image and text with the actual content of this section.

Let us know how this goes!

#5

Thank you for your reply.

That is exactly what I did (duplicate the About section).
Did it again, no change. It works on Pro (editor), but not on the live version.
Same issue in Firefox and Chrome.

#6

Hello @breix,

Please insert at least a gap element in your first column.
Leaving it empty may cause some issue.

Kindly let us know how it goes.

#7

Hi @RueNel

That simple trick solved it. :slight_smile:

Thank you.

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.