Support ForumOptimize for iPhone / Mobile – Change font size on mobile only – Support Forum

Optimize for iPhone / Mobile – Change font size on mobile only

taymore14 — Sun, 10 May 2015 18:21:01 +0000

Hello I am having some issues with my website (iamtaymore.com) when it comes to optimizing for mobile. The “i am taymore” looks great on the web but breaks up on mobile. Is there a way to change the font size JUST for mobile?

Also I am creating my blog a little differently. I am creating quote bubbles for everyday. They don’t look right when I have a defined width in css on mobile. On the website the FIRST quote looks right but then it looks like crap on mobile. Not sure if there is something you would suggest. I understand this might be something you can’t help me with.

I have images of both things I am taking about. Any help would be greatly appreciated.

Header on iPhone
https://s15.postimg.org/qf0nncoij/ihpone_header.png

Quote on iPhone
https://s18.postimg.org/3lvoozl5l/iphone_quotes.png

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

IshYoBoy — Mon, 11 May 2015 07:50:53 +0000

Hey,

This can be handled using the “Custom CSS” field in Theme Options -> General Options and targeting only the parts which you need to change.

All our page elements have “Advanced Global Attributes” where you can assign a classname and then use it for attaching additional CSS Styles.

For the font size you might have to use “!important” to override the default theme sizes.

Of course to target only mobile devices (smaller screen widths) you will have to add the code to a media query:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope this helps.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

taymore14 — Wed, 13 May 2015 11:40:48 +0000

Any idea what the full code I would be using to target ” I Am Taymore” just below the cartoon image would need to be? Everything I have tried has not worked.

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

taymore14 — Thu, 14 May 2015 11:10:43 +0000

Any idea what the full code I would be using to target ” I Am Taymore” just below the cartoon image would need to be? Everything I have tried has not worked.

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

IshYoBoy — Thu, 14 May 2015 14:55:21 +0000

Hey,

Use the advanced global attributes for the “I Am Taymore” title and give it an additional css class let’s say my-class-name. We assume you have used the “Headline” content element to enter the headline and has chosen whether it is H1 or H6 and also what the color is in the settings of the element.

So then for the H1 with the my-class-name attached to it just use something like:

@media (max-width: 600px) {
	h1.my-class-name {
		font-size: 30px;
	}
}

@media (max-width: 600px) {

h1.my-class-name {

font-size: 30px;

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

taymore14 — Fri, 15 May 2015 17:42:38 +0000

Thanks for your help but for some reason I am not able to get the font smaller for the header “i am taymore” under the cartoon. Probably it has something to do with my experience with wordpress themes and mobile. I might need to have someone who has more experience get this resolved for me :(

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

IshYoBoy — Tue, 19 May 2015 06:30:00 +0000

Hey,

This is a question of pure CSS, rather than WordPress. Try this:

@media (max-width: 768px) {
	.page-id-104 h1 {
		font-size: 40px !important;
	}
}

@media (max-width: 768px) {

.page-id-104 h1 {

font-size: 40px !important;

}

This should change the font size on screens smaller than 768px.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

Marcelo Ferrari — Thu, 14 Jul 2016 16:23:23 +0000

Hi!

Please, what CSS code do I use to custom the font size of the post-text and the post-title on the mobile?

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

IshYoBoy — Fri, 15 Jul 2016 06:14:23 +0000

Hi Marcelo Ferrari,

it depends on theme you are using and also on many things.

But here is example how to create custom css code to achieve what you need:

@media (max-width: 768px) {
    .single-post h1 {
        font-size: 40px !important;
        line-height: 1.3;
    }

    .single-post p {
        font-size: 20px !important;
        line-height: 1.3;
    }
}

@media (max-width: 768px) {

.single-post h1 {

font-size: 40px !important;

line-height: 1.3;

}

.single-post p {

font-size: 20px !important;

line-height: 1.3;

}

If you have still problem with that, please provide some url where we can see the result.

Cheers

—
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Optimize for iPhone / Mobile – Change font size on mobile only

Marcelo Ferrari — Fri, 15 Jul 2016 10:29:17 +0000

Thanks for the replay, but it didn’t work.

I am using the boldial theme. The following link is a blog page of a category.

https://www.ferrariando.com.br/secao/contos/