- This topic has 5 replies, 2 voices, and was last updated 5 years, 9 months ago by Skandha.
-
AuthorPosts
-
July 22, 2018 at 2:37 pm #150105intermissionabeautybreakParticipant
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!
JessicaJuly 23, 2018 at 12:06 am #150129SkandhaParticipant@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,
SkandhaJuly 23, 2018 at 11:23 am #150192intermissionabeautybreakParticipantHi @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,
JessicaJuly 23, 2018 at 8:12 pm #150211intermissionabeautybreakParticipantNothing 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 #150220intermissionabeautybreakParticipant@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 #150230SkandhaParticipant@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 -
AuthorPosts
- The topic ‘Large white space next to first column of table on mobile’ is closed to new replies.