Solved Advice needed with website migration to DiVi

Hi! I'm new to DiVi and I'm new to this community.

I'm helping a friend migrate a Wordpress website that was built using WPBakery and QODE (Bridge theme) to DiVi. When I first installed DiVi (in a staging version of the main site), I was using DiVi 4.2.x and I migrated to DiVi 5 today. So, I'll move forward with DiVI 5. I'm working through the migration and for each page of the site, I opted to using the existing content vs having DiVi generate a new page or use AI to generate a page. With DiVi 5, I'm able to access the existing text better, which is goodness.

Anyway, I have two questions:

1. I have a paragraph of text with an embedded image that has a "float: right" CSS style rule applied. The image appears correctly on desktop, but when I give the mobile version of the page, the image isn't centered (due to the float). So, what's the best way of dealing with this: remove the image and re-add it using whatever mechanism DiVi provides or should I write custom CSS to apply the float only if the page isn't rendered on mobile?
2. I have some content in a HTML table. So, when it appears on mobile, the table is chopped off and most of the text can't be seen. lol Does DiVi have a module or a block I could use to store this data so it displays better on mobile? I was also thinking of putting the content in DIVs with an inline-block display attribute, that I would change to block (or unset the inline-block) on mobile.

Given the nature of the site, I'm not at liberty to post links, but I can post sanitized HTML snipets that show the content structure I'm working with, if necessary.

Thanks in advance for your time and advice!

Peace...

 

Thanks!

Thanks for the info. I'm comfortable with CSS, but since I'm new to DiVi, I want to do things "the DiVi way" as much as possible, so I can learn as much as I can.

Great! Thanks for the tips!!! You've been very helpful!

Peace...

Tom

 

I actually found a simply CSS style rule to apply that solved my particular need nicely.

I found this article:

https://allthingssmitty.com/2016/10/03/responsive-table-layout/

and after trying it out, I found all I needed to do is this and I was set:

HTML:

@media screen and (max-width: 600px) and (orientation: portrait) {
table tr {
    display: block;
    margin-bottom: 1em;
  }

  table td {
    display: block;
    text-align: center;
  }
}

I think I can remove the "max-width" media selector condition too. Anyway, I wanted to share this with you.

Thanks again!

Peace...