Page 1 of 2

Text misalignment in mobile view

Posted: 10 Sep 2020, 15:34
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

Re: Text misalignment in mobile view

Posted: 10 Sep 2020, 22:55
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

Re: Text misalignment in mobile view

Posted: 11 Sep 2020, 09:45
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,

Re: Text misalignment in mobile view

Posted: 11 Sep 2020, 11:36
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

Re: Text misalignment in mobile view

Posted: 12 Sep 2020, 15:13
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

Re: Text misalignment in mobile view

Posted: 14 Sep 2020, 14:50
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?

Re: Text misalignment in mobile view

Posted: 14 Sep 2020, 20:09
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

Re: Text misalignment in mobile view

Posted: 16 Sep 2020, 09:25
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.

Re: Text misalignment in mobile view

Posted: 17 Sep 2020, 11:58
by Jan
Hi, for example the buttons:

Code: Select all

#phCheckoutCartBox .phItemCartUpdateBoxForm .btn {
	line-height:16px;
	padding: 2px;
}
Jan

Re: Text misalignment in mobile view

Posted: 17 Sep 2020, 13:26
by escafandra
Thank you Jan!!