How to Turn Off Automatic Image Expansion Inside Hyperlinks

Created on 13 February 2024, 10 months ago
Updated 27 June 2024, 6 months ago

Problem/Motivation

Language-icon displays with width = 100%

Steps to reproduce

install language icons and activate the module.

a.img--is-clickable > img.solo-image, a.img--is-clickable > picture > img.solo-image {
width: 100%;
float: left;

Proposed resolution

Hello Alaa,

Only big flags when activating the language-icons.

My resolution at this moment: add in solo-subtheme-style.css

.language-icon {
width: 16px !important;
}

With regards,

Theo

ps the upgrade last sunday was perfect.

✨ Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡³πŸ‡±Netherlands tzsl

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @tzsl
  • πŸ‡³πŸ‡±Netherlands tzsl
  • Assigned to flashwebcenter
  • Status changed to Fixed 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello Theo,

    The functionality allows images to enlarge to fill 100% of their container space exclusively when nested within a hyperlink. Should the hyperlink be removed, the images will revert to their initial dimensions. This feature was implemented to enhance the interactive experience by enlarging images within clickable links. It's designed to function in this manner.

    However, if you prefer to deactivate this feature, you can do so by navigating to your-site.com/admin/appearance/settings/solo. Once there, locate the "Page Wrapper" section and expand it. Then, simply add the CSS class "image-auto" to the "CSS Classes" field. This adjustment will disable the automatic enlargement of images within links.

    In the theme js/solo-scripts.js the user picture is excluded but now, I updated this code snippet uses the :not([class*="icon"]) selector to exclude any or
    elements that have a class containing the substring "icon". This covers cases where the class is exactly icon, as well as cases where "icon" is part of a larger class name, such as language-icon or money-icon.

    "Additionally, if you prefer the current functionality, your existing setup is also an excellent choice."

    Best Wishes,
    Alaa

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
Production build 0.71.5 2024