Text not displaying correctly for mobile

Beaver Builder
1

Hi there,

I have Heading and Text widget in top area of this site. All widgets have the same settings, text aligned right with 20px left padding. However, when viewed on smaller devises, the top heading aligns right and I can’t figure out why.

The heading text
WELCOME TO
GREG GRAY ON DEMAND

Does not display aligned right on mobile devises.

Can you help me figure out why?

Thanks, Yael

2

Moved credentials to private post

http://staging1.amo.greggray.com/

username: greggray
password: pixelhappy925

EDIT: Moved back to public for others to help!

3

Hey Yael,
I’ve moved your website credentials to a private post.
Please, pay attention when you post on a public forum, never share login details on the wild! :slight_smile:
I suggest you to change that password as soon as possible and post it back here in a private post.

Best regards,
Alessandro

4

Update: I was able to target to the top two headings via their specific node – .fl-node-550e61c89516a .fl-heading – and was able to align right via media queries.

However, wasn’t able to do this for Allstate and Members Only. Those still have some space to the right when viewed on mobile. I’m thinking this is because there is another element – the Allstate logo – that I hid on mobile devises.

Not critical but would prefer to be able to align right Allstate and Members Only on mobile devises.

I’ll keep tinkering; perhaps I’ll sort it.

Thanks.

5

HI Alessandro,

I should have explained — since this is a development site, it is password protected. The username and password are not for the WP dashboard but only to view the site.

Sorry for not explaining that.

Yael

6

Oh well, now I see, not a real security problem then, I was overcautious!

Alessandro

7

About your question, there’s no need to target fl-nodes in your CSS.
Have a look at the advanced tab, for any BB module you can find the ID and Class fields at the bottom, use that so you can write your own rules on your CSS, target multiple fields at once and keep your styles human readable.

Hope this helps!

Alessandro

8

Hi Alessandro.

I actually tried that first – created a custom class for the row that contains all the headings and added that to media queries. Text was still aligning left on mobile devises even though they are set to display right. The only way I could get the heading text to align right on mobile devise was to target specific node in media queries.

So still not sure why a) the class I set for the row and added to media query didn’t apply; and b) why the right aligned text set for the heading modules are not being applied for mobile devises.

The only way I have been able to get the text to align right on mobile devises is by targeting the exact node.

9

Yael,
you are using 2 columns to put the image on the left of the ALL STATE / MEMBERS ONLY text, and then using a media query to hide the image container below a certain width.
With 2 cols an .fl-col-small is added by BB to your markup so there’s a max-width of 400px applied to the containing columns, try this:

.fl-node-550e6e9ed5e3e.fl-col-small { max-width: 100% }

About Classes or IDs styles not applying to the content in general, please check if you’re targeting the right elements. Classes and IDs are applied to containers and you need to target the right nested child, eg: if you apply a “myheading” ID to an heading the css selector would be “#myheading .fl-heading”.

Hope this helps!