How to place photo in submenu on mobile in the middle?

[JoaquinExcitare]

Hello,

Does anybody know how I can place a photo in a submenu on mobile in the middle? At the moment its alignd to the right (see picture)

[AsadSani]

hey joaquinExcitare , our team will help you 

To center a photo within a submenu on mobile, you need to adjust the CSS for the submenu or the container holding the photo. Here's how you can do it:

Steps:

1. Inspect the HTML Structure:

   • Check the class or ID applied to the submenu and the image. You'll typically find the submenu wrapped in a container.

2. Modify the CSS:

   • Add or adjust the CSS for the container or the image element to ensure it is centered.

   Here's an example:

   css

   Copy code

   .submenu { display: flex; justify-content: center; /* Centers content horizontally */ align-items: center; /* Centers content vertically (if needed) */ text-align: center; /* Ensures text/images are centered */ } .submenu img { max-width: 100%; /* Ensures image is responsive */ height: auto; }

3. Test on Mobile:

   • Make sure the styles are applied only to mobile using a media query:
     css

     Copy code

     @media (max-width: 768px) { .submenu { display: flex; justify-content: center; align-items: center; } }

4. Adjust Depending on the Menu Library:

   • If you're using a menu library or framework (e.g., Bootstrap), ensure no conflicting classes override your custom styles.

5. Use Inline Flexbox for Individual Items (Optional):

   • If the photo is one item among many, ensure it's wrapped in a container that uses flexbox and center it specifically.

Share Your Current Code:

If this doesn't solve your issue, feel free to share the HTML and CSS you're working with, and I can provide a more tailored solution.