I want to have different logo images for mobile and desktop. I created a partial design for the header and added an image component for the logo. Now if I can select logo image in that which will be common for all viewports.

Now I have a requirement as I need a different image for mobile. I can do it by adding another image component for mobile by doing some CSS changes such as display:none for this image in desktop. But from the experience editor, if I want to change the mobile image its is not possible due to display:none property.

If I remove that property in the experience editor, it looks weird design in the experience editor.

Is there any other way to do it- using styles or rendering variant concepts?

  • Have you tried to use a personalisation rule on the component? There is a rule that reads "where device type is one of the list" The list allows you to pick multiples from a list like phone tablet etc.
    – Dan
    May 21 '20 at 6:13
  • Have you tried using a Responsive Image variant? isaadansari.wordpress.com/2018/06/25/… May 28 '20 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.