three column layout on mobile view
-
hello,
I need help with my homepage layout when it’s open on mobile.
I am using the resonar theme and would like the three column layout to be the same when looking at my site through a phone. Kind of like forcing the desktop view. been having trouble filtering through the forums and finding a solution. any help/tips would be greatly appreciated. thank you.The blog I need help with is: (visible only to logged in users)
-
Hi there!
The theme you’re using is what is called a “responsive” theme. Responsive themes offer an easy way to set up a website that looks great on any device – that includes your desktop computer, laptop, tablet, or mobile device. In addition to loading properly on any device, the best responsive themes also perform as needed and are easy to navigate on any screen size. Responsive themes also remove the need to have a specific mobile-only theme. That means you don’t have different “views” in your theme, the theme will respond to the device viewing the content and resize the content accordingly.
Since the Resonar theme is adjusting the layout based on the size of screen viewing your site, that’s why you’re seeing the layout change on mobile devices.
Was there a specific thing that isn’t working as expected when viewing your site on mobile devices? We can see if that’s something we can help with.
-
Hi!
Thank you for your reply. There is a slight layout problem I noticed when viewing my site on mobile devices that I was hoping to fix.
On the desktop view of my homepage I am using three columns and I organized my events to be viewed from left to right (in ‘rows’, with the most recent event being the first on the top left, than then middle one, than the one on the right and then the next ‘row’ etc.).
On mobile view though, the layout is one column stacked on top of the other. Therefore, my events are no longer viewed in chronological order. I was wondering if there is a way to show all three columns side by side on mobile view too, and not stacked, so that my viewers can continue to see the timeline I had designed.
I hope that was clear enough! Let me know if you have any more questions. Hopefully we can figure this out together!
thank you :)
-
This is due to the way you organise things. You must make a with 3 columns using a column block. Next you put only 1 event in each column.
Next you make a new row with 3 columns and so on. -
Hi staartmees,
thank you so much for your suggestion. I have reorganized the homepage and it works using the format you gave me and the appearance I wanted on mobile view. it felt like a puzzle to figure that one out!
But I do have another concern now. Every time I add one new event, I now face the problem of having the first row with two empty columns (until two new events are ready to be posted, thus filling the entire row).
normally, I wouldn’t mind so much but since it’s the homepage I would like the row to always be full. What I’ve been doing in the meantime is moving each event from the rows below up by one column space so that my first row always has events displaying.
I find that this has become quite extraneous work every time I want to add one new event.
I was wondering if you might have another suggestion to help me? -
Hi everyone,
I have not seen how the home screen was organized in the beginning, so I might be wrong.
What about some custom CSS to solve this original problem, to override original wrapping?
would like the three column layout to be the same when looking at my site through a phone.
If theme is available to download for @yoavyaron, then plan is Premium or higher, means adding custom CSS shall be available.
To always keep all column blocks in one row even on small screen I would add this:
.wp-block-columns { flex-wrap: nowrap; }———————
@yoavyaronAbout this problem:
But I do have another concern now. Every time I add one new event, I now face the problem of having the first row with two empty columns (until two new events are ready to be posted, thus filling the entire row).
There is no way to push the items from one column block to the other.
The most simple solution is to decrease the amount of columns in top column block, f.e. to leave 1 column when only one post exist, to two when second is added and so on.
This is far not perfect solution, here is another solution:
As long as you place links to posts as images, you can use Gallery block or Masonry block filled with images/links to posts. This will leave “responsiveness” of the whole block and will allow you to control the overall look. This way the first image stays the first even on mobile screen. The only minus is that every new image is being added to the bottom, not the top, so you will have to move it up using “<” and “>” buttons.Please revert if that helped? I value your feedback, so let me know what you think!
- The topic ‘three column layout on mobile view’ is closed to new replies.
WordPress.com Forums 