We use Wordpress with a Genesis child theme but find that on some pages built with the BeaverBuilder, that title are not displaying properly on mobile devices.
We find on smaller screens (iPhone 5c, Android 5’’) that on these two pages that BB does not break the Title into a new line and instead pushes it out to the left, thereby reducing the screen size or width for everything underneath. What we would expect is that font size of ‘PAIRFUM’ is being scaled to fit the page and that the text after ‘PAIRFUM’ is breaking into a new line.
We have the following setup:
WordPress 4.4.2
WooCommerce 2.5.3
Genesis 2.2.6 & Altitude Pro Theme
BeaverBuilder 1.7.5 in combination with a full width page template
The titles are created in BB using a single column row with a text editor field and some custom HTML code for font size / type / colour / etc.
The problem with the blog page is that the words are joined together with a non-breaking space so the browser is considering them as one word. Take a look at the screenshot below for reference.
Just delete the space before the word News, and add it again manually by hitting the space bar on your keyboard.
Re the Pairfum word, px is a static unit, so it won’t scale in any way. I’d suggest using a Heading module for that part instead of the Text Editor. Our Heading module has an option to change the font-size on mobile devices, which makes things a bit easier to manage.
Following your instructions, I was able to remove the space before ‘news’ and to recreate the photo/text using a photo module for the logo and two heading modules for the two lines of text.
The only element where I would appreciate a tip from you is the following:
in the heading module, I have placed text with HTML code to achieve similar text formatting (colour, shadow, size, etc.) to what we had. I suspect though, there may be a smarter way of doing this as this formatting repeats itself throughout the site.
the 3 elements (photo, H1 heading, H3 heading), we repeat on many, many pages. I tried using ‘global modules’ but then they have the exact same text everywhere but it is great for the photo (the illustration of the perfume bottle). When saved it a module / row that was NOT global, then I did see it on another page. Maybe this was just me forgetting to save it but if not, then a tip would be most welcome.
I’d suggest saving the Heading module as a template. That way, you can reuse it any time. Same thing on your second question. You can save a row as a template. Since these elements have different texts every time you use them, save them as regular templates, not global, so every time you apply them to the content area, you can easily change the texts.
I apologise, but I am not seeing where you have asked a question regarding the HTML/CSS you’re using in the Header module?
If you’re referring to the use of HTML in the Header text option. I would suggestion you continue using spans like you have, but instead of using inline styling. You use a class and apply that styling to the class.
Sorry, I seem to have missed that question of yours! Unfortunately, adding CSS classes isn’t something specific to BB so we don’t really have a documentation for that. There’s also a lot of documentation for those online. An example, a site where I learned all of my CSS knowledge, is the site below. http://www.w3schools.com/cssref/sel_class.asp
In a nut shell, you add a class to your elements so you can reference them later on your CSS. So for your case, instead of typing <span style="font-family: 'Aperto Com'; font-weight: bold; text-transform: uppercase; font-size: 100%;"> you can make it <span class="pairfum-heading1"> then reference the class pairfum-heading1 on your CSS like so…
That way, any time you want to use the same styling to another heading, simply assign the same class to it. Feel free to read through the site above for more info!
