Header icons not aligning as expected

Chris Skinner
8 Posts
Chris Skinner posted this 22 May 2019
Report a bug

Following a recent update to the software all my website headers are showing incorrectly.
It is with the social icons. They align perfectly on some pages, however on others they are miss-aligning.
See... https://www.maplesflowers.co.uk/index.php compared to https://www.maplesflowers.co.uk/index.php/weddings
This site is running latest Joomla. Any reason why?

Following a recent update to the software all my website headers are showing incorrectly. It is with the social icons. They align perfectly on some pages, however on others they are miss-aligning. See... https://www.maplesflowers.co.uk/index.php compared to https://www.maplesflowers.co.uk/index.php/weddings This site is running latest Joomla. Any reason why?
Vote to pay developers attention to this features or issue.
1 Reply
Order By: Standard | Newest
Support Team
Support Team posted this 22 May 2019

Hi Chris,

The issue happens on the pages where styles of the com_eshop component are used:
https://www.maplesflowers.co.uk/components/com_eshop/themes/default/css/style.css
The style sheet file of this component applies a vertical align top to ALL SVG icons:

audio, canvas, iframe, img, svg, video {
    vertical-align: top!important;
}

This code breaks the layout of the Nicepage icons.

You can override this behavior with the following css code:

.u-svg-link {
    vertical-align: baseline!important;
}

This code can be added on each problem page in Nicepage, manually to the component style sheet file or to the Site Settings >> in Nicepage Desktop to apply it in the theme.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Chris, The issue happens on the pages where styles of the com_eshop component are used: https://www.maplesflowers.co.uk/components/com_eshop/themes/default/css/style.css The style sheet file of this component applies a vertical align top to ALL SVG icons: audio, canvas, iframe, img, svg, video { vertical-align: top!important; } This code breaks the layout of the Nicepage icons. You can override this behavior with the following css code: .u-svg-link { vertical-align: baseline!important; } This code can be added on each problem page in Nicepage, manually to the component style sheet file or to the Site Settings >> in Nicepage Desktop to apply it in the theme. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments