Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150105

    Hi all,

    New WordPress user here…using the fotographie theme. I have several tables set up for pricing, and I am having trouble with the mobile view of the tables. The first column in each table separates into several lines and leaves a large amount of white space between the text and the next column. I would like it to look similar to the monitor view (the text on 1-2 lines). I used the TablePress plugin and added the following css to fix the problem initially (but it is no longer working):

    div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    Here are the pages with issues:
    https://intermissionabeautybreak.com/cuts-color/
    https://intermissionabeautybreak.com/styling/

    Please help!

    Thanks!
    Jessica

    #150129
    Skandha
    Participant

    @intermissionabeautybreak: I don’t think there is much you can do for this but maybe the following CSS Code will make it look better.

    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width:610px) {
    	.column-1 {
    		width:115px;
    	}
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #150192

    Hi @skandha,

    Thanks for your help again! Unfortunately, this css did not work. I am thinking I will try to make the table from scratch instead of using the plugin… Maybe I will have more control over it? Hopefully this works..

    Thanks,
    Jessica

    #150211

    Nothing is working! I am not sure what to do. The first column in every row is cut off to 2 words per line and then a large space between that and the 2nd column. @skandha any other ideas how to make this look better at all?

    Thanks so much for all your help!

    #150220

    @skandha I decided to scratch the table idea and I created my pricing list in Photoshop and just added it to the page as a png image.. Much easier for me to work with this way. Thanks again for your help!

    #150230
    Skandha
    Participant

    @intermissionabeautybreak: It is kind of difficult to work with tables when it comes to responsiveness. Glad you found a way out. Your site look much better now. Have a good day! 🙂

    Let me know if you have anymore issues.
    Kind Regards,
    Skandha

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Large white space next to first column of table on mobile’ is closed to new replies.