Docs

[thecashbag]

I have a CSS progress tracker at the top of my shopping cart. See live view here: http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/

The steps of tracker shrink down as the screen size shrinks down. But once the screen hits 768px the tracker breaks down into the next line, even though there is room for each li element to shrink further.

Why is this happening?

How can I make each li element shrink further before the break happpens?

See a live screencast here explaining the problem: http://screencast.com/t/nNgDguPEYevc

[Christopher]

Hi there,

Columns width become 100% and they stack on top of each other at 767px in responsive design, please see the attachment.

Thanks.

[thecashbag]

Oh yes thanks that seems to be it!

Do you know any CSS I can use to stop that particular row from becoming full width at 767px? Perhaps change it to 420px?

[Friech]

Hi There,

Add a class (e.g. keep-inline) to those 1/4 and 3/4 section. And then add this on your custom CSS in Customizer.

@media (min-width:  481px) {
	.keep-inline.x-column.x-1-4 {
	    width: 22%;
	    float: left;
    	margin-right: 4%;
	}
	.keep-inline.x-column.x-3-4 {
		width: 74%;
		float: left;
	}
}

With that the columns will stay inline until 480px. But If the progress tracker and the logo still does not fit on those columns, you need to let them stack on 767px. You might want to center the logo to have a better look.

Hope it helps, Cheers!

[thecashbag]

Sure 🙂 Red lines have been added to show the incorrect alignment

[thecashbag]

Sorry wrong thread!

Your solutions works thank you.

[thecashbag]

Actually, there is a problem with the progress tracker overlapping the logo.

How can I stop that from happening? I want the tracker to shrink more instead of overlapping the logo.

Screenshot attached.

[Friech]

Hi There,

Please update my given CSS code to this:

@media (min-width:  481px) {
	.keep-inline.x-column.x-1-4 {
	    width: 22%;
	    float: left;
    	margin-right: 4%;
	}
	.keep-inline.x-column.x-3-4 {
		width: 74%;
		float: left;
	}
	.keep-inline .progressbar {
		margin-top: 0;
		max-width: 80%;
    	float: right;
	}
}

Don’t forget to add the class on those columns.

Cheers!

[thecashbag]

Not to worry! I figured it out 🙂

Here is the solution incase any one else has a similar problem.

@media (min-width: 535px) {
.keep-inline.x-column.x-1-4 {
width: 20% !important;
display: table-cell !important;
margin-right: 10% !important;
float: none !important;
vertical-align: top !important;
}
.keep-inline.x-column.x-3-4 {
width: 70% !important !important;
display: table-cell !important;
margin-right: 0 !important;
float: none !important;
vertical-align: top !important;
}

[Rupok]

Glad that you sorted it out. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts