Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
2 Trả lời
1100 Lượt xem

Hey,


I'm trying to send my first newletter via Odoo mail marketing. 

When i sent a test it looks good on a desktop, but the images are nog showing correct on a mobile phone. There only shown half on the mobile phone.

Where and how could that be fixed?


thx in advance!

Pieter

Ảnh đại diện
Huỷ bỏ
Câu trả lời hay nhất

Hey Pieter! 👋

Congrats on sending your first newsletter via Odoo Email Marketing — you're almost there! If your images are showing correctly on desktop but appear cut off or only half visible on mobile, it’s usually due to styling or layout settings that aren't mobile-friendly (responsive).

Let’s fix it step by step:

1. Use "100% Width" for Images

Make sure your images are set to 100% width in the Odoo email builder:

  • Click on the image block.
  • Check the "Width" setting — make sure it’s set to 100% or the responsive setting.
  • Avoid setting fixed pixel widths like 600px, which don’t scale on smaller screens.

2. Use Odoo's Responsive Blocks

Odoo provides mobile-optimized blocks. Be sure to:

  • Use "two-column" or "image + text" blocks that automatically stack on mobile.
  • Avoid building custom HTML inside raw HTML blocks unless you're familiar with responsive design.

3. Check Image Size and Ratio

Sometimes images with large width or strange aspect ratios might break layout on small screens.

  • Try uploading a resized image with a max width of 600px.
  • Use images with a normal landscape ratio (e.g., 16:9) for better mobile fit.

4. Enable Responsive Design in Settings (if available)

If your version of Odoo has advanced email settings:

  • Go to Email Marketing → Configuration or Settings.
  • Look for any "responsive" or "mobile optimization" options and enable them.

5. Test with Different Devices and Email Clients

Use a service like Litmus or Mailtrap to preview how your newsletter looks across devices.

Or just send test emails to both Gmail mobile, Apple Mail, and Android to compare.

✏️ Bonus: Custom CSS (Advanced)

If you're editing raw HTML/CSS, make sure you use mobile media queries like:

css

@media only screen and (max-width: 600px) { img { width: 100% !important; height: auto !important; } }

But you usually don’t need this unless you’re customizing deeply.

Let me know if you want to share a screenshot or the block you're using—I can help tweak it more precisely. Good luck with your newsletter launch! 🚀

Ảnh đại diện
Huỷ bỏ
Câu trả lời hay nhất

I have the same probleme.

Ảnh đại diện
Huỷ bỏ
Bài viết liên quan Trả lời Lượt xem Hoạt động
1
thg 6 25
1106
9
thg 4 25
6035
1
thg 4 25
781
1
thg 4 24
1508
0
thg 2 24
1182