Spacing on a moblie

  • Resolved pbwpwork

    (@pbwpwork)


    6 years, 7 months ago

    Hi Tobias,

    I have seen a couple of answers on this topic, but none of what has been suggested has work in my case. The problem is with the top table on the page that I have linked to. (This page is in the first tab) It is 2×2 table so lets say top-left is A1, top-right is A2, bottom-left is B1 and bottom-right is B2.

    So my example is:

    A1 = Pearl Effect and Metallic Epoxy Flooring
    A2 = picture
    B1 & B2 (they are merged) = SHIMI METALLIC PIGMENTS
    Metallic Pearlescent Pigments
    For Special Effect Flooring Systems

    Now on a desktop this looks great, however on a mobile/cell it looks not so good. I merged B1 & B2 so the text would run across the screen (under the picture) on a mobile but it did not have the effect, so when look on a mobile what appears in B1 & B2 is just a thin strip of text.

    I have tried wrapping:

    .tablepress-id-7 .column-1 {
	width: 90%;
	white-space: pre-wrap;
}

    with no luck.

    Hope this is clear.

    Can you advise?

    Many thanks,

    Paul

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I see what you mean, and to be honest, my advice would be: Don’t use tables to achieve this. From what I can see, you just want to show a picture on the right side of the tab. For this, it should be sufficient to just add the image (e.g. via the Media Library) and choose the correct alignment. Your theme should then apply the proper CSS code to implement the desired alignment.
    Using a table for this would work, but it’s not the best solution, as this would not be a proper (“semantically correct”) use case for tables. You’d be running into all kinds of problems, starting with bad layout on mobiles to accessibility (e.g. how screen reader software for blind people treats the content), etc.

    Regards,
    Tobias

    Thread Starter pbwpwork

    (@pbwpwork)

    Hi,

    Thanks for the answer, I can’t use the image placement the comes with the template as I am using Tabby Responsive Tabs inside the page, so therefore the image placement on the page has become redundant. Just have to figure out have to place images inside the Tabby Responsive Tabs that work across all platforms.

    Still like Tablepress ?? great plugin!!!

    Thanks,

    Paul

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Paul,

    can you insert an image with the image placement from the theme, just so that I see what’s not working when this is done inside a tab?

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Spacing on a moblie’ is closed to new replies.