Website look different mobile vs desktop

I can’t provide an official answer on behalf of the theme’s designer, but what you are seeing on your mobile device is intentional, the result of a technique called “responsive design.”

Years ago, when people first began viewing websites on mobile, the experience was unpleasant, because the layout was designed for larger desktop screens and would shrink to such a small size on mobile that nobody could read it.

Responsive design fixes this. Instead of shrinking to fit the screen, the layout converts into a single column. On your site, this makes it easier to read the words and to see the three videos.

Hey Anna,

thank you for choosing Bento!

The previous answer is a very good explanation, I couldn’t have described it better ?? If you try to use any website (incl. one based on Bento) with the “request desktop page” option in your mobile browser, you will see what a page would look like if no responsive design was applied – most likely it will be unusable because of crammed space, tiny fonts and small click areas.

Bento applies best practices in responsive (mobile-friendly) web design, progressive enhancement, and media breakpoints in order to bring the most convenient experience to both desktop and mobile device users. Most other leading WP themes do the same, as can be experienced when viewing them from a mobile device or resizing the browser window.

You can learn more about responsive design e.g. here and here.

Should you have additional questions about the theme, don’t hesitate to contact me!

@mbrailer, thank you for replying to this one!

Sincerely,
Andrii / Satori Studio

Got it, thanks a lot! @mbrailer thx for your answer as well!

If I want to change the color on the header on the mobil version, where can I do that?

Many thanks,
Anna

Hey Anna,

there’s a “Header background color” option in the “Header Colors” tab of the “Appearance – Customize” admin section, it works for both desktop and mobile. There’s no back-end setting for mobile colors exclusively, but you can use a custom snippet in the “Additional CSS” tab of the “Appearance – Customize” admin section:

@media screen and (max-width: 48em) { .site-header { background-color: #333333 !important; } }

replacing the “333333” bit with the needed color in hex notation.

Sincerely,
Andrii / Satori Studio