Text misalignment in mobile view

Phoca Cart - complex e-commerce extension
escafandra
Phoca Enthusiast
Phoca Enthusiast
Posts: 52
Joined: 12 Jul 2018, 11:19

Text misalignment in mobile view

Post by escafandra »

Hello,

How could I fix the text misalignment found in the shopping cart in mobile view where price digits are overlapped with other elements of the page? Please see screenshot attached.

Thank you,

https://imgur.com/a/w8EQAjr
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Text misalignment in mobile view

Post by christine »

Hi,

checked your site, but couldn't find Phoca Cart view, as shown in your screenshot - to check Template grids etc.
Your site is outdated: Joomla 3.9.12
Current version is: 3.9.21

Kind regards
Christine
escafandra
Phoca Enthusiast
Phoca Enthusiast
Posts: 52
Joined: 12 Jul 2018, 11:19

Re: Text misalignment in mobile view

Post by escafandra »

Hello Christine,

Sorry about that. Forgot to tell you, the online shop is only in the spanish versions of the site. That is why you could not find it. Please go to https://www.jcmackintosh.es/tienda-online.html?lang=es

Just to remind you, this misalignment problem only occurs on mobile view.

Thank you,
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Text misalignment in mobile view

Post by christine »

Hi,

it belongs i.e. to /bootstrap/css/bootstrap.min.css, such as .col-xs-2 width etc. and BS template yootheme etc.
For the moment: Could you please try to change temporary to a Phoca Template? e.g.: https://www.phoca.cz/phocacartdemo/

In the meantime, will contact Jan for further investigation.
Kind regards
Christine
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Text misalignment in mobile view

Post by Jan »

Hi, I think, the template button styles need to be changed for the mobile view as they take a lot of place.

So, per CSS, e.g. parts can be made smaller or the checkout view needs to be overriden to fit the needs :idea:

Image

Jan
If you find Phoca extensions useful, please support the project
escafandra
Phoca Enthusiast
Phoca Enthusiast
Posts: 52
Joined: 12 Jul 2018, 11:19

Re: Text misalignment in mobile view

Post by escafandra »

Thank you Christine and Jan,
Jan wrote: 12 Sep 2020, 15:13 Hi, I think, the template button styles need to be changed for the mobile view as they take a lot of place.

So, per CSS, e.g. parts can be made smaller or the checkout view needs to be overriden to fit the needs :idea:

Image
That would be great, but how can I do it? What CSS code do I need to write and where?
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Text misalignment in mobile view

Post by Jan »

Hi, the padding for the buttons is done in your template CSS, so padding for buttons needs to be overwritten for buttons in checkout view. Better only for small screens if possible.

Jan
If you find Phoca extensions useful, please support the project
escafandra
Phoca Enthusiast
Phoca Enthusiast
Posts: 52
Joined: 12 Jul 2018, 11:19

Re: Text misalignment in mobile view

Post by escafandra »

Ok, I found where my template CSS is, but I am not familiar with CSS code. Could you please provide the code I need so I can copy and paste? Thank you so much.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Text misalignment in mobile view

Post by Jan »

Hi, for example the buttons:

Code: Select all

#phCheckoutCartBox .phItemCartUpdateBoxForm .btn {
	line-height:16px;
	padding: 2px;
}
Jan
If you find Phoca extensions useful, please support the project
escafandra
Phoca Enthusiast
Phoca Enthusiast
Posts: 52
Joined: 12 Jul 2018, 11:19

Re: Text misalignment in mobile view

Post by escafandra »

Thank you Jan!!
Post Reply