Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 22, 2018 at 2:37 pm #150105
    intermissionabeautybreak
    Participant

    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

    July 23, 2018 at 12:06 am #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

    July 23, 2018 at 11:23 am #150192
    intermissionabeautybreak
    Participant

    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

    July 23, 2018 at 8:12 pm #150211
    intermissionabeautybreak
    Participant

    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!

    July 23, 2018 at 9:43 pm #150220
    intermissionabeautybreak
    Participant

    @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!

    July 24, 2018 at 12:36 am #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

  • Author
    Posts
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.