CSS Challenge re columns and order columns on mobile design

Support
#1

Hi,

I would like to create a specific order of elements for mobile design in CSS.

In the desktop/laptop version (see left image) the ipad image is the third column of the dark blue banner section.

For mobile designs (right image), the ipad image should be positioned below the text and yellow small stripe, as in the example. (To create this mobile image, I used Cornerstone (hiding for desktop and laptop versions)) How do I create the same effect with custom CSS? Rather than using a specific MOBILE SECTION as I did now in Cornerstone, I want to automate it with CSS so that every new page will have an automatic mobile version too.

I already created CSS classes, and currently the class .welcome-image (which is the ipad), is not displayed on mobile versions, because it was overlapping the text. I couldn’t figure out the CSS to position it as in the example above. Hope you van assist me.

Thanks for your help!
Els

#2

Hi @digitalpractice,

Thanks for writing in.

You can use this code below so that you could adjust the image using CSS:

@media (max-width: 767px){
.e2457-20.x-image .welcome-image {
    margin: 298px 4px 0px -342px;
    float: none;
    width: 279px;
} 
}

Adjust the margin and width numbers to achieve the best look of your setup. Then, adjust (max-width: 767px) to adjust when to show or hide your setup.

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi,

Thanks.
I have removed .welcome-image {display:none}, and added the above code into Custom CSS, but can’t see any changes on mobile. The image is still not visible, which is weird, as I removed .welcome-image {display:none}.

.e2457-20 seems a very specific class.

What does it represent?

Remember, I want the code to be applicable for all pages, so I definitely do not want page specific code. This wouldn’t be a solution, because I want anyone in my team to be able to create extra pages without having to adding classes or going into custom CSS.

Thanks for your help.

#4

Hi,

Upon checking I can still see the code .welcome-image {display:none}

Kindly remove it and change the code provided by my colleague to this

@media (max-width: 767px){
.e2457-20.x-image.welcome-image {
    margin: 298px 4px 0px -342px;
    float: none;
    width: 279px;
} 
}

e2457-20.x-image is the class associated with your image element as you can see in the screenshot.

Thanks

#5

Hi, oops my bad, there was another one that I indeed had forgotten.
Have removed it now. However, it doesn’t work.

Would you mind logging in with the details I have provided?

#6

Hi Kris,

For the specific case you gave the screenshot, the fact is that you used the margin -250px value to make the image go up. Now that should be reset in the mobile view so it will not overlap with the rest of the text in mobile view. Also, you need to set the image container to display block and the image itself to have an auto margin to force the image to sit in the center of the row.

So please ignore the previously given code and add the CSS code below to X > Theme Options > CSS:

@media (max-width: 767px) {
    .welcome-image {
        margin: auto !important;
        display: block;
    }
    .welcome-image img {
        margin: auto;
    }
}

I added the code for you.

Thank you.

#7

Awesome Christopher, this works! Thank you so much!