Text misalignment in mobile view

[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]

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]

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]

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

[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



Jan

[escafandra]

Thank you Christine and 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

That would be great, but how can I do it? What CSS code do I need to write and where?

[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

[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.

[Jan]

Hi, for example the buttons:

Code: Select all

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

Jan

[escafandra]

Thank you Jan!!