Hi, and thanks for the origami theme, it’s elegant and easy to use.
I am using origami theme for a website and tested it in mobile phone screen mode. The title of the site (“h1.logo”) and some text elements will not scale or fit as they should. I would have some screen captures to show what happens, but i find here no way to upload them to the forum…
in detail:
1) the title of the site, or logo-text (entered as text, not as an image) is not scaling down when in responsive mode. It keeps the same dimensions (that are bigger than the screen width in cases of 320×480 pixel screens and similar), so it runs out of the screen.
2) I created three columns with custom text in the lower part of the homepage (with your SiteOrigin page builder). They are rescaling well if in the 320×480 resolution, but they rescale wrong when in the 360×640 px and other similar mobile phone resolutions.
3) I created a “call to action” of which the text is also not scaling and evading out of the screen with im some resolutions (eg. 1024×768)
It seems that generally, the big fonts are not rescaling, and the text written with big fonts gets a problem when the page is displayed in small resolution (mobile phone) mode.
what can I do about this?
Thanks in advance!
Horia
as far as I understand, this is a classical “typography problem” in responsive design. I found some solutions here:
https://bugsnag.com/blog/responsive-typography-with-rems
but I am not so good in coding css (etc.) to be able to integrate them in the origami theme.
Or, perhaps they are already there and I don’t know how to use them?
Hi Horia
Thanks for reaching out.
1. Insert the following under Appearance > Custom CSS:
/* Logo */ @media (max-width: 480px) { #logo h1 { font-size: 30px; } }2. Something isn’t right there, Page Builder should be handling those columns.
a. Ensure Appearance > Theme Settings > Responsive > Responsive is checked.
b. Settings > SiteOrigin Page Builder, ensure that Responsive Layout is checked there.
3. Try the Call to Action widget in our new Widget Bundle will handle small devices much better. Give that a try:
https://wordpress.org/plugins/so-widgets-bundle/
dear Andrew,
thanks for your fast answer, even in weekend and before Christmas! :)
I appreciate it!
Your css-hint for the logo worked wonderful!
i refined it a bit, and I recommend it also for other users:
1) check, how long, in pixels, is your title-word (in my case: “orgelerneuerung”, with a letter height of 52 px, was 540 px long!)
2) add to these 540 px about 60 px for each side (until browser/screen edge, in case of the theme “origami”), this makes a total of 660 px.
3) you should use a CSS snippet like the above one, starting at 660 px. (and not at 480 px, because that would still produce a curious situation at dimensions between 660 and 480 px!)
4) because the smallest available resolution today, for older smarphones (Nokia, Blackberry…) is 320 px wide, I prefer to do a second scaling of my title word, so I put a second media “condition” in CSS, like above, changing once again the height of the letters, and the CSS snippet looks finally like this:
/* Logo */ @media (max-width: 660px) { #logo h1 { font-size: 30px; } } @media (max-width: 380px) { #logo h1 { font-size: 25px; } }* Note that for each case (lenght of the title word) the pixel “steps” (lenghts) in the snippet above have to be different! One can check this by using firefox web developer tool for responsive design, and trying all kind of resolutions, or, the best, dragging the dimensions of the simulated screen (browser window) constantly, to find the point where it becomes too narrow for your title word.
Regarding the scaling problem of other parts of the site:
a) call to action widget – I had already downloaded your widget bundle, I will test it and revert to you.
b) I also have three columns in my home page layout (produced with your PB). These columns are resizing perfectly for a screen of 320 px wide, which is wonderful. BUT they do not resize for screens that are >321 px wide. In fact, they shoud resize starting at a width of <640px. BEcause for "320 px < screen width < 640 px", the three columns look awful (with just half words in them.
Could you give me a hint where to change the CSS, similarily to the one for the logo? That would be wonderful!
Thanks again and have a nice (festive) week!
For sure, it should be 640, I’ll look into that on our side. For now, please try the following under Appearance > Custom CSS. It’s specific to only these divs:
@media (max-width: 640px) { #pg-26-0 .panel-grid-cell, #pg-26-1 .panel-grid-cell, #pg-26-2 .panel-grid-cell { float:none; width:auto; } #pgc-26-1-0, #pgc-26-1-1 { margin-bottom: 30px } #pl-26 .panel-grid { margin-left: 0; margin-right: 0; } #pl-26 .panel-grid-cell { padding: 0; } }Before you apply the above CSS please go to Settings > SiteOrigin Page Builder and check what the Mobile Width is set to. Ideally it should be 780.
Dear Andrew, thank you!
I discovered that following your last hint, by just changing the “mobile width” to a fitting value (680 px. or, as you suggested, 780 px), would solve the problem of the three column text. It now changes from three columns to one column, if the width of the screen (browser page) is less than, eg., 680 px. The value was, until now, 320 px, and this was the reason the columns were showing wrong.
As a suggestion: you could insert a small hint about this setting in your PB-backend, this would spare future questions like mine (if you meet other designers that do not get it by themselves… :) )
Super, glad that helped.
For sure, thanks for the feedback. We’ll get documentation up for PB 2.0 ASAP.
All the best.
Regarding the “call to action” widget and its resizing in responsive design:
I tested both widgets (SO-widget and PB-widget). They both do the same:
* when in mobile view with screen width of <780 (ca.), the "button" overlaps with the "title" and "subtitle" of the call to action
* when the screen width gets <480 px., the button jumps at last on a second row, below the "tilte/subtitle" of the "call to action".
It would be great if there would be a possibility to change this by css, to tell the button to jump on a second line below, when width of screen is <780 px.
Thank you in advance and greetings from Vienna!
PS: I would prefer the css-settings to be for the SO-widget, it suits better my needs than the PB-widget of the same name.
Here is the Custom CSS for this. Insert under Appearance > Custom CSS and edit as required:
@media screen and (max-width: 640px) { .sow-cta-base { text-align: center; padding: 1.75em; } .sow-cta-base .sow-cta-text { float: none; } .sow-cta-base .so-widget-sow-button { display: inline-block; float: none; margin-top: 2em !important; margin-left: 0!important; } }Hope that helps.
Thanks very much!
For sure!