Responsive font text on Meta slider

[Adele]

Hello, I’ve used html to adjust font sizing on meta slider but when you view my site on mobile devices the text on the meta slider is all jumbled. Plus the other text over the homepage and FAQs etc  pages are too large for mobile devices how do I get them to reduce proportionally?

 

Also the layout on mobile devices is not as neat as I’d like, how do you rectify this? For example my credit card images and banners on the footer (placed with custom html)

[Harry]

Hi Adele,

You can fix by add custom css in JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 480px) {
.metaslider .flexslider .caption-wrap h2 {
font-size: 16px;
}
.metaslider .flexslider font {
font-size: 12px;
white-space: normal;
}
h4 {
font-size: 16px;
}
.home h3 span { font-size: 16px !important;}
}

@media only screen and (max-width: 360px) {
.metaslider .flexslider .caption-wrap h2 {
font-size: 14px;
}
}

I saw you insert more inline css font font-size of elment so on mobile it can’t use theme css to reduce font size on mobile. Could you explain more about issue with footer banner

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Adele]

This reply has been marked as private.

[Harry]

Hi,

1. Please add custom css

@media only screen and (max-width: 480px) {
.metaslider .slides img { width: 100% important;}
.metaslider .flex-control-nav {display: none;}
.mc4wp-form-fields {text-align: center;}
}

2. I mean you use inline css for the text on homepage and text on FAQs page

3. For badge on footer, it can’t change like your design because can’t change the DOM of HTML. If you want like design you have to move the big orange badge to the left on desktop.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Adele]

Hi Harry,

 

Thanks for that.

 

1. How do I get the meta slider images to reduce in size on mobile images? On my mobile the images are not centered or cropped, whereas tablet they are
2. How would you suggest to adjust font size on the page rather than inline CSS – I see it affects the responsive design but I’m trying to use all my H tags on the pages and sometimes this means changing the font size on a page so it doesn’t look messy.
3. No problem, I have adjusted it and will amend the borders

Thanks

Adele

[Harry]

Hi Adele,

1. Please try to change prev code to

@media only screen and (max-width: 480px) {
.metaslider.organic-slider .slides img { width: 100% important;}
.metaslider .flex-control-nav {display: none;}
.mc4wp-form-fields {text-align: center;}
}

and clear cache

2. I saw you add more heading tag (H) it not good for SEO, please change to paragraph use some heading in your content.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi Adele,

1. Please try to change prev code to

@media only screen and (max-width: 480px) {
.metaslider.organic-slider .slides img { width: 100% !important;}
.metaslider .flex-control-nav {display: none;}
.mc4wp-form-fields {text-align: center;}
}

and clear cache

2. I saw you add more heading tag (H) it not good for SEO, please change to paragraph use some heading in your content.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Adele]

Hi Harry,

I ahve tried this and recently updating my images has caused meta slider to mis-behave on the mobile view again. It really isn’t responsive or smart cropping my images at all. I have a sony compact mobile and the images are overlapping, taking up the whole page view, without cropping centrally.

 

And even though I have updated the images and deleted the cache the metaslider is still showing outdated images, on mobile only. Is there going to be an update for the theme as meta slider really is not performing well on mobile and with those CSS add-ons you wrote me.

 

PLease advise

Thanks

Adele

[Harry]

Can you send me login credentials, we need closer check.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Adele]

This reply has been marked as private.

[Harry]

Sorry for give you incorrect code. I corrected this and now the slider work.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Adele]

Hi Harry, thanks…I’m sorry to say this but the first image slider is a different height to the others when it is on a smaller mobile…

 

Thanks Adele

[Harry]

I help you fixed this.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts