Home › Forums › WoodMart support forum › align the image to the center on mobile
align the image to the center on mobile
- This topic has 8 replies, 2 voices, and was last updated 1 hour, 23 minutes ago by meiotrevo.pt.
-
AuthorPosts
-
October 15, 2024 at 6:23 pm #605247
meiotrevo.ptParticipantI’m sorry to bother you again with this subject, but is it possible to align the image to the center on mobile?
Attachments:
You must be logged in to view attached files.October 16, 2024 at 11:57 am #605418
Aizaz Imtiaz AwanKeymasterHello,
Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly. Also share the page url where the image is situated.
Best Regards
October 16, 2024 at 5:28 pm #605531
meiotrevo.ptParticipantI will leave the logins private
October 17, 2024 at 10:53 am #605716
Aizaz Imtiaz AwanKeymasterHello,
To align the image to the center on mobile, you can create a separate row specifically for mobile with a different background image. Here’s how to do it.
Create two rows—one for desktop and one for mobile. you need to assign a class and hide it with the custom CSS. This will allow you to have a centered background image on mobile while keeping the layout intact for desktop.
Best Regards
October 17, 2024 at 11:57 am #605734
meiotrevo.ptParticipantCan you help me with this custom css?
I’m not a programmer and I really don’t know how to do it.October 17, 2024 at 3:31 pm #605815
Aizaz Imtiaz AwanKeymasterHello,
Add the classes desktop-row and mobile-row to your rows, and this CSS will hide the desktop row on mobile and show the mobile row.
Please try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS./* Hide on desktop */ .mobile-row { display: none; }
Add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Mobile section:
/* Show on mobile */ .desktop-row { display: none; }
Best Regards
October 17, 2024 at 4:52 pm #605844
meiotrevo.ptParticipantI did the test and it really works for line, but it seems that it doesn’t work for section. is it normal?
October 18, 2024 at 8:35 am #605950
Aizaz Imtiaz AwanKeymasterHello,
Could you please share some screenshots which issue you have faced? so I can better understand your issue? This will help me guide you more effectively.
Best Regards
October 18, 2024 at 11:58 am #606014
meiotrevo.ptParticipantOf course!
So what I did was duplicate the section that I want to work on on mobile, which is the home banner.
The first section will be visible on the desktop. I used the desktop-row code as shown in the screenshot.
The second section will be visible on mobile usei a cor preta de fundo para ser fácil de distinguir. I used the mobile-row code as shown in the screenshot.
But as you can see in the other screenshots, both sections are visible, on both screens.
Attachments:
You must be logged in to view attached files. -
AuthorPosts
Tagged: center image mobile
- You must be logged in to create new topics. Login / Register