Mobile display problems

Unfortunately, since internet started to be browsed from mobile screens, a lot of bets are off. On a phone that’s a couple of years old, you may have just a couple of 100’s pixels wide, whereas desktops give you much more space. To make things even more complicated, ”Retina” screens may need special treatment, in order to not produce way to small images and text.

Luckily, you’re using a responsive theme, that does a pretty good job at adjusting for all these different possibilities, by changing background images, collapsing the menu into a “hamburger” for small screens, etc.

But I would simply suggest that you don’t try to hit the middle of the page with your text by entering empty paragraphs. Just let the text flow instead. In general, that will give the best result.

Yes, you CAN use CSS to create a DIV element that will float in the middle of the screen, regardless of how the user tries to move around on the page. But that will just create a huge mess.

Good luck!

Thank you for the reply. Not sure what you mean by “empty paragraphs”. Isn’t there a max-width setting in CSS I can use to make my mobile settings more responsive? Or maybe a Plugin that would let me use the same theme as my desktop with it’s formating on mobile devices?

Some 5 years ago, a typical theme would use some 700-900 pixels width. If the browser would happen to have a wider window open, then the rest would just be background color.
If someone would open the same page on a narrower screen, then that problem would be “solved” with a vertical scrollbar, which was not very convenient.

Now, when a substantial part of the web traffic originates from mobile screens, that approach doesn’t work anymore. You can’t continue to make designs that look exactly the same on every device. You have to make compromises. Lots of compromises. And modern, responsive, themes do their best to display your content on various devices.
As a user/content author, you should avoid hard-coding specific fonts. You should also avoid forcing some piece of text to appear a few lines further down. (On the page you referred to, you’ve tried to vertically center some text by entering 2-3 empty paragraphs. That looks nice on a normal laptop screen, but really awkward on a mobile, where you’ve pushed a big part off the initial screen, for no reason.)

4-5 years ago one might use a plugin to swap in a mobile-specific theme for mobile clients. The new approach is with responsive themes, where you use media queries to create 2-4 different layouts, depending on the width of the screen.
You can try this on your own computer: Open your website in a browser, and then drag the window to become narrower and watch how, at certain width thresholds, the layout and text size will change. Normally, these changes are really smart and reasonable. There’s usually no point in trying to “outsmart” them, using some additional plugin.

As a content creator, you need to accept the world as it is today, and create content that will look well even when things may need to shuffle around a bit. One example might be a contact form:
Say, if screen is at least 800 px, it may be presented in 2 columns.
Between 500 and 800 px, it may be in one columne, but with the labels to the left of each entry field. When less than 500 px, the labels may suddenly be located above each entry cell. Your best approach in such a case is not to fight, but simply accept this fact, and move on.

I updated the Sydney Theme which is a Parent theme for Bistro but that did not solve my problem with the mobile display. Some of the pages such as Menu, Lunch Specials, and others for the site bagelsnbeyond.com when you look at it on a phone that you hold in normal view have the content way too narrow with the pictures so tiny you cannot see them, and all of the content rides off to the right. But if you turn the phone around and view it in landscape mode it seems to be fine. How can I fix this using Custom CSS?