Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 General
 CSS and Responsive Designs
 proddetail Display Issue
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/09/2019 :  05:56:31  
Hey, I'm using premium-felicity-php and when viewing proddetail.php on a phone the Price overlays the Product Name. Doesn't do it on desktop or tablet view, just smaller mobile.

See Image

http://vividcolorllc.com/EcomIssues/ScreenShotinChormeMobile.jpg

Thanks in advance..

The new file upload works great!!

Thanks
David

Sinbad
Administrator

65705 Posts

Posted - 10/09/2019 :  06:08:48  
Hi David, I took a look at the site on motog7 and don't see any overlapping can you try clearing the browser cache on the device.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/09/2019 :  08:44:55  
I've looked at it on multiple phones. Doesn't happen on Quick Buy, only happens when you hit Details.

(Cache is clean)

On Samsung 10, and Samsung Note 8

Example: https://www.vividcolorllc.com/store/proddetail.php?prod=CanvasPrint12x12

I've tested in developer view on Chrome and can't mess it up, but it does on the real device. Weird, checking other phone settings to see if some setting is causing it.

Thanks
David

Edited by - dhagoodvivid on 10/09/2019 08:51:35

1818charlie
Advanced Member

United Kingdom
326 Posts

Pre-sales questions only
(More Details...)

Posted - 10/09/2019 :  12:38:03  
Hi David,

FYI I've looked at it on a Samsung Galaxy S5 & HTC one M9 and in portrait mode on both all looks spot-on but on landscape mode the price and item name are overlaying each other on both handsets. On my laptop in FF dragging the screen to it's narrowest also looks fine, even after refreshing. Seems like a breakpoint issue

Steve
Manchester, UK

Using ECT since 2004

Edited by - 1818charlie on 10/09/2019 12:39:11

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/09/2019 :  13:10:28  
Hey Sinbad,

I found that if I'm in portrait mode they overlap. I then rotate phone to landscape (should be tablet mode) and they look correct. Then I rotate the phone back to portrait and they look fine,then I pull down the screen to update and then they overlap again.

Not finding any setting on the phone to cause this.

Thanks
David

Sinbad
Administrator

65705 Posts

Posted - 10/09/2019 :  14:52:01  
Hi David, I can't get it to overlap but you see it so one thing you can do is add a little bottom margin after the second breakpoint.

@media screen and (max-width: 870px) {

div.detailname h1 {
margin-bottom: 7px !important;
}


Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/10/2019 :  12:35:52  
Thanks.

So I just installed the update, and now it shows in chrome when you reduce the browser window to mobile view, if it doesnt show, refresh and it will.

Here's an example: http://vividcolorllc.com/store/proddetail.php?prod=CanvasPrint12x12


Thanks
David

Sinbad
Administrator

65705 Posts

Posted - 10/10/2019 :  12:58:10  
Hi David, reducing the browser window can cause the layout not to display properly, using chrome (ctrl-shift-i) or More Tools> developer tools then select the device from the top bar to view mobile a better way.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Paradise
Ecommerce Template Guru

USA
1589 Posts

Pre-sales questions only
(More Details...)

Posted - 10/10/2019 :  14:50:55  
It looked fine to me in chrome no matter what size I made the browser.

Mark
Responsive Design Deals Ecomm Plus - ASP 6.8
www.paradiseclothingco.com

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/10/2019 :  16:26:22  
So, I took a vid so you can see whats happening.

works ok if I do Shift Refresh, but just refresh you see the problem. This was on my laptop, same on my 34inch monitor as well. So they are different resolutions.

http://vividcolorllc.com/EcomIssues/ProDetailVid.mp4

Thanks in Advance.

Thanks
David

Sinbad
Administrator

65705 Posts

Posted - 10/10/2019 :  19:34:16  
David I was able to recreate it, I'm thinking its the order of the style sheets, try moving ectstyle1.css just below style.css so that its like:


<link href="css/style.css" rel="stylesheet">
<link href="css/ectstyle1.css" rel="stylesheet" type="text/css" />



Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Vince
Administrator

37928 Posts

Posted - 10/11/2019 :  01:24:59  
I managed to recreate this this morning and thanks very much for the explanation of how to do so, David. I think really it is a fault of the style sheet. In css/ectstyle1.css around line 1271 there is...

div.detailname h1 {
margin:1px 0px 0px 3px;
float:left;
width:98%;
}

...and this should really be I believe...

div.detailname h1 {
margin:1px 0px 0px 3px;
float:none;
width:auto;
}

Can you try that and let me know how it goes?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

dhagoodvivid
Starting Member

USA
15 Posts

Posted - 10/11/2019 :  07:42:27  
Yes Sir Vince, that fixed it thanks!

Thanks
David

Sinbad
Administrator

65705 Posts

Posted - 10/11/2019 :  10:15:00  
Good call Vince and you say your not a designer

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Vince
Administrator

37928 Posts

Posted - 10/11/2019 :  16:04:52  
Beginners luck?

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000