Canvas Support

Cart problem

5 replies · opened Apr 17, 2016

FfotobobApr 17, 2016

As Freddy Mercury once sang...I'm going slightly mad. The cart is showing up funny on my pages - already open on page load and it is pushing down the page content. I won't bore you with a long list of troubleshooting steps I have taken and I'm sure the problem will turn out to be a bit of "damaged code" - damaged by me, but I think it's going to take a fresh pair of eyes to find it.

Live site is at http://www.fotografics.eu/bbq/

I'm also attaching an image showing the situation.

Any help would be greatly appreciated.

SSemicolon WebSTAFFApr 18, 2016

Hello,

We have just checked out your Website and the entire Top Cart CSS Section in the style.css File is missing. Please add the following code in your style.css File:

/* ----------------------------------------------------------------
	Top Cart
-----------------------------------------------------------------*/

#top-cart { margin-right: 0; }

#top-cart > a > span {
	display: block;
	position: absolute;
	top: -7px;
	left: auto;
	right: -14px;
	font-size: 10px;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	background-color: #1ABC9C;
	border-radius: 50%;
}

#top-cart .top-cart-content {
	opacity: 0;
	z-index: -2;
	position: absolute;
	width: 280px;
	background-color: #FFF;
	box-shadow: 0px 20px 50px 10px rgba(0, 0, 0, 0.05);
	border: 1px solid #EEE;
	border-top: 2px solid #1ABC9C;
	top: 60px;
	right: -15px;
	left: auto;
	margin: -10000px 0 0;
	-webkit-transition: opacity .5s ease, top .4s ease;
	-o-transition: opacity .5s ease, top .4s ease;
	transition: opacity .5s ease, top .4s ease;
}

.style-2 .container #top-cart .top-cart-content { top: 40px; }

.style-2.sub-title .container #top-cart .top-cart-content { top: 50px; }

#top-cart.top-cart-open .top-cart-content {
	opacity: 1;
	z-index: 11;
	margin-top: 0;
}

.top-cart-title {
	padding: 12px 15px;
	border-bottom: 1px solid #EEE;
}

.top-cart-title h4 {
	margin-bottom: 0;
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.top-cart-items { padding: 15px; }

.top-cart-item {
	padding-top: 15px;
	margin-top: 15px;
	border-top: 1px solid #F5F5F5;
}

.top-cart-item:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.top-cart-item-image {
	float: left;
	margin-right: 15px;
	width: 48px !important;
	height: 48px !important;
	border: 2px solid #EEE;
	-webkit-transition: border-color .2s linear;
	-o-transition: border-color .2s linear;
	transition: border-color .2s linear;
}

.top-cart-item-image a,
.top-cart-item-image img {
	display: block;
	width: 44px !important;
	height: 44px !important;
}

.top-cart-item-image:hover { border-color: #1ABC9C; }

.top-cart-item-desc {
	position: relative;
	overflow: hidden;
}

.top-cart-item-desc a {
	text-align: left !important;
	font-size: 13px !important;
	width: auto !important;
	height: auto !important;
	font-weight: 600;
}

.top-cart-item-desc a:hover { color: #1ABC9C !important; }

.top-cart-item-desc span.top-cart-item-price {
	display: block;
	line-height: 20px;
	font-size: 12px !important;
	color: #999;
}

.top-cart-item-desc span.top-cart-item-quantity {
	display: block;
	position: absolute;
	font-size: 12px !important;
	right: 0;
	top: 2px;
	color: #444;
}

.top-cart-action {
	padding: 15px;
	border-top: 1px solid #EEE;
}

.top-cart-action span.top-checkout-price {
	font-size: 20px;
	color: #1ABC9C;
}

For the exact position of the above code, please refer to the Default style.css File that came with the Package.

This will definitely fix your issue. Let us know if we can help you with anything else or if you find any further issues.

FfotobobApr 18, 2016

thank you very, very much - I have no idea how that bit got deleted, but as I said in the original post, it was most likely due to me having "damaged" the code.

I do have a further issue - the background image in the second parallax div in the content section is zooming to blurry on iPads and iPhones - the image is 2000px x 1333px.

I added background-attachment: scroll; as one site recommended, but no luck, still blurry. No real luck so far with googling for a solution.

Otherwise, you folks have made a very fine template. My congratulations to your team.

SSemicolon WebSTAFFApr 19, 2016

Hello,

No Problem! We are Really Happy to help you fix this issue. :)

We have just checked out the Code you are using for your Content and Parallax and it seems to be incorrectly implemented since you are adding the Entire Content inside the Parallax Sections with the Parallax Image which is causing the Image to stretch a lot on Mobile Devices causing it to Blur. Parallax Sections are individual sections and should not be used along with a Lot of Content. Use the Parallax Section as the following Example:


	... Your Parallax Section

	... Your Content

	... Another Parallax Section

	... Your Content

... and so on

This will definitely work much better. Let us know if we can help you with anything else or if you find any further issues.

FfotobobApr 19, 2016

OK - thank you - the template is complex and though your documentation is fine, there is still a learning curve.

SSemicolon WebSTAFFApr 20, 2016

Hello,

Thank You so much for your Valuable Suggestion. We will surely try simplifying Our Documentation in the Coming Updates.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard