Condensed Container

[SE1217707]

Hello - now that I have switched to PRO, I am working on removing all CSS from my website. Can you help me with an issue I am facing?

For the code below, it takes a specific section on my home page, and condenses it down to be two lines with three badges on mobile. Otherwise, it will be large images. Is there anyway to do this in PRO without the CSS?

*Badges Condensed on Mobile*/
@media(max-width: 979px){
	.x-column.x-sm.x-1-6 {
	    width: 30.33332%;
	    margin-bottom: 20px;
	}

	.x-column.x-sm.x-1-6 {
	    position: relative;
	    z-index: 1;
	    float: left;
	    margin-right: 4%;
	}

	.x-column.x-sm.x-1-6:nth-child(3),
	.x-column.x-sm.x-1-6.last, 
	.x-column.x-sm.x-1-6:last-of-type {
	    margin-right: 0;
	}
  .x-container>.offset {
    margin-top: 10px;
  }
}

[prakash_s]

Hello @SE1217707,

Thanks for writing to us.

I would suggest you use the V2 Row in place of the Classic Row and Classic column. Now you need to add the six-column in the Row, after that you need to set the column layout as custom (16.66%).

Now go to the Row —>Layout—>Click on the Template —>Set the column layout for the small device as 3 columns layouts.

Hope it helps
Thanks

[SE1217707]

That did the trick! Thank you!

I tried using a similar technique for another section, but it is not working. May I ask your advice on the best way to go around this?

I am looking to achieve a three column layout so that when the screen is condensed on mobile, it goes in order verses side by side like it is currently doing. The images you see are all background images. I would like to use buttons instead of clickable text. I would also like for the user to be able to click the image (if possible) to be taken to where the button goes.

The top row is the row I tried creating, and bottom row is the current layout. Issues I am facing:

1. the images are showing very long in my attempt verses the correct size you see in the currently established images
2. in the first box, I didnt add a row - only added a button in the column. in the second box I did add a row and add the button to it. for both of these attempts, I could not get the button to align center
3. is it possible to have the background image be clickable in addition to the button on the front?

[ruenel]

Hello @SE1217707,

You can actually make the entire column as a link. You can select the <a> HTML tag in your Column settings and the supply the Link as well:

To adjust the column heights, you can set a responsive heights so that on smaller screens, you will have a smaller boxes:

With the above settings, you might need to adjust the background position as well to make sure that the heads of the couples will not be cut off.

Please check out the 3rd section I have added as a demonstration.

Hope this helps.

[SE1217707]

Wonderful! When I created mine, the text is showing at the top, how can I shift that down?

Also, for mobile I am seeing it as squares and not the full image

When I bring the screen in - not quite mobile but not full screen - it is also showing two together and the third by itself

[ruenel]

Hello @SE1217707,

1.) In your Column settings, find the Flexbox tab and enable it. You will need to position it like this to position the Headline element to the bottom of the Column:

2.) On mobile you are seeing it as squares because of the minimum height of the column. In your case, you have set it to 250 pixels.

3.) Yes, it is showing Two Columns and the the last column is stretch. That is because in your Row > Layout you have this:

If you switch the Column Fill to Auto, you will have this:

Or if your want to display just 1 column, you can change the Layout > Template.

By the way, since you have made the Columns as a link, be advised that you cannot nest <a> HTML tags which means that YOU MUST REMOVE THE LINK in your Headline elements. So, instead of having this:

<a href="https://cornerhousephotography.com/weddings/"><span style="color: > #ffffff;">WEDDING</br>GALLERY</span></a>

You will only have this:

WEDDING</br>GALLERY

You do not need to color the headline using the Headline > Text > Format > Color in the Headline settings.

If you do this, it will prevent you from having an issue where your Column links will not work.

Hope this makes sense.

[SE1217707]

YOU ARE FREAKING AMAZING! Thank you!!!

[tristup]

Hi @SE1217707,

Glad that we are able to help you.

Thanks