Re-create a mockup

Support
#1

Hi there, Im having some trouble, hope its a simple fix.

I want to re-create this mockup:

I have it setup here:

But as you can see, the image is pushing the content band up, and the text on the right, is there anyway to make it like the mockup? ignore the alignment on the mockup, i need it as the page, so its responsive. (also removing the gap in the image at the bottom, so it sits flush with the footer)

It also need to stay responsive, so on a mobile, the text needs to stay on the green color.

Thanks.

#2

Hi There,

Thank you for writing in, please add a CLASS monster-column to your right column.



Then add a CLASS monster to the image.



Then add this to Theme Options > CSS

@media (min-width: 768px) {
	.monster-column.x-1-2 {
		position: relative;
	    min-height: 300px;
	}
	.x-img.monster {
		position: absolute;
	    bottom: 0;
	    margin-bottom: 0;
	}
}

Feel free to adjust the column’s min-height where you see it fits.

Hope it helps,
Cheers!

#3

you are a genius! perfect, just a couple of issue, on certain screens:

There is a gap below the pic, hope it can be fixed.

Thanks for your help!

#4

Hello There,

To resolve your issue and remove the gap in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
    .x-img.left {
        margin: 0 auto;
    }
}

Hope this helps. Please let us know how it goes.

#5

Thanks, it worked for mobile, but on say an ipad portrait, it still has the gap:

#6

Hello @logoglo,

Thanks for updating the thread. :slight_smile:

Please add following code under X > Theme Options > CSS:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px){.x-img.monster{bottom: -26px !important;} }

Above changes are done using custom CSS. If you would like to explore CSS, please take a look at following resource:

https://www.w3schools.com/css/

Please note that providing support for custom codes (like CSS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

Thanks.

#7

Hmm, that didnt seam to do anything…

#8

Hello @logoglo,

Thanks for updating the thread. :slight_smile:

I don’t see the code on website. Have you removed the same? Code I have shared is working fine on my end. Here’s screencast. Upon adding the code, please make sure to clear cache clear all caches.

Thanks.

#9

Yeah, its there…

#10

Hi There,

Please update the CSS code I’ve provided above, from this:

@media (min-width: 768px) {
	.monster-column.x-1-2 {
		position: relative;
	    min-height: 300px;
	}
	.x-img.monster {
		position: absolute;
	    bottom: 0;
	    margin-bottom: 0;
	}
}

to this:

@media (min-width: 768px) {
	.monster-column.x-1-2 {
	    position: absolute;
	    min-height: 235px;
	    bottom: 0;
	    right: 10px;
	}
	.x-img.monster {
		position: absolute;
	    bottom: 0;
	    margin-bottom: 0;
	}
}

Hope it helps,
Cheers!

#11

Perfect! thanks.

#12

On behalf of my colleague, you’re welcome. cheers! :slight_smile:

#13

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