Smaller font on mobile

AnjaBasaric

Hi guys,

How can I reduce the size of my FAQ text to make it responsive for mobile. I'm using FAQ section and the FAQ titles are looking just fine in desktop version, but when I go to my mobile site text is all messed up. It's not responsive at all. I don't want to reduce 24px desktop size, would like to leave that big size for desktop but make it smaller for mobile.

I tried with this CSS but it's not working:

@media only screen and (max-width: 600px) {
element.style {
font-size: 10px;
}
}

The url with FAQ is http://dev.anjabasaric.com/about-me/.

Kind regards,
Anja

Air

Hello there:-)

Problem is caused by your setting of line-height for FAQ title. If you will remove it then it will look better on mobile.
See screen shot: http://nimb.ws/vi3mBR

With kind regards.

AnjaBasaric

Hi there,

Thanks for this, it helped.

I have two more problems with the same page.

1.) The {write} mode on the top of the page is working on desktop version but on mobile its not writing, it just shows the whole text over the picture immediately after you open the page, there's no writing effect. Is there something I can do to have a {write} mode on mobile as well?

2.) One more thing with the same page, I'm trying to get custom heading text to be width:100%, to be without padding or anything on mobile site. I would like to leave the desktop as it is but make the mobile text width:100%.

I've tried this:

@media screen and (max-width: 600px) {
.quote-row {
width: 100% !important;
}
}

And second one :

@media screen and (max-width: 600px) {
.two-boxes {
width: 100% !important;
padding-right: 10px !important;
padding-left: -20px !important;
}
}

But it didn't work.

Screenshot attached below so you can see exactly how I want it to be. https://drive.google.com/file/d/0Bx9eVs4voBGkLXNxYnN1NmtPRnc/view?usp=sharing on

Next link is the example of my home page in full width that I managed to get with the same CSS i just added above, which unfortunately is not working for About Me Page: https://drive.google.com/file/d/0Bx9eVs4voBGkMks5end0TzBzVWM/view?usp=sharing,

Thanks once again for this perfect theme.

Cheers,
Anja

Air

Hello :-)

AnjaBasaric said: Is there something I can do to have a {write} mode on mobile as well?

It is switched off on mobile, more info here https://support.apollo13.eu/discussion/4653/scrolling-words

AnjaBasaric said: One more thing with the same page, I'm trying to get custom heading text to be width:100%, to be without padding or anything on mobile site. I would like to leave the desktop as it is but make the mobile text width:100%.

It might not be easy to do that. However you can edit these paddings that push it in row settings as shown on below image:




With kind regards.

AnjaBasaric

Hi,

I don't want to remove my desktop padding, would like to leave desktop as it is. There is no way to remove padding with css only on mobile? Maybe if I create 3 columns in that one row and then just remove the column on mobile, is that possible? Or maybe my css was wrong, maybe you have some other CSS I can use, because if I managed to do it on my home page, I don't see the reason why it would be impossible to do it on my about page.

And thanks for the first tip, I managed to get it work.

Regards,
Anja

Daniel

Hello Anja

Yes, you can add a ROW with the 3 columns and hide these outside columns on mobile. Let me show you how to do this:
1) Add the same settings: http://nimb.ws/iHkFhM to these two outside columns.
2) The central columns must have these options: http://nimb.ws/Qwy7mk

With Regards
Daniel