Not responsive

Wolfke2800's picture
Wolfke2800
Thu, 12/01/2016 - 05:06
#1
Not responsive

Any idea when the slider will be responsive as it should be? Now fonts are not readable on smartphones and buttons (css) are showing up too small.

I'm currently using Version: 8.x-1.0-beta4

Image title

Huntwood's picture
Huntwood
Thu, 12/01/2016 - 17:53

I second this request - not sure what we're going to do with our slider text for mobile displays.

phuonght's picture
phuonght
Mon, 12/05/2016 - 22:29

Hi,

Can you please give us site url? We would like to have a check.

Wolfke2800's picture
Wolfke2800
Fri, 12/09/2016 - 04:06

Did you get my private comment?

phuonght's picture
phuonght
Sun, 12/11/2016 - 22:29

Yes, we are finding a solution and would like to notify you ASAP.

phuonght's picture
phuonght
Wed, 12/14/2016 - 02:40

Hi there,

Sorry for your inconvenience however we do not support any fix for your problem at the moment. You can please try to add some custom css code which support responsive to slider. 

Wolfke2800's picture
Wolfke2800
Sat, 12/24/2016 - 03:22

Hi

Can you give me details about which custom CSS is supported? It's not working on our website at the moment.

phuonght's picture
phuonght
Sat, 12/24/2016 - 04:38

You can please try following code:

.md-objects .md-layer-1-1-2 a {
padding: 6px 10px;
}

Wolfke2800's picture
Wolfke2800
Fri, 01/06/2017 - 05:52

That does work! Is it possible to change the font size through our own CSS somehow? It gets ignored by MD Slider so now it's too small on smarthpones and it cannot be read. Thanks

phuonght's picture
phuonght
Fri, 01/06/2017 - 22:44
/* tablet */
@media (max-width: 62em) {
.md-objects .md-layer-1-1-2 a {
padding: 6px 10px;
line-height: 20px;
font-size: 20px;
}
.md-objects .md-layer-1-1-1, .md-objects .md-layer-1-2-1, .md-objects .md-layer-1-3-1{
font-size: 20px;
line-height: 20px;
}
}

/* mobile */
@media (max-width: 48em) {
.md-objects .md-layer-1-1-2 a {
padding: 6px 10px;
line-height: 22px;
font-size: 22px;
}
.md-objects .md-layer-1-1-1, .md-objects .md-layer-1-2-1, .md-objects .md-layer-1-3-1{
font-size: 22px;
line-height: 22px;
}
}]

You can please customize font size and line height but remember they must have same value.  In /* tablet */ section:

- Button with link: customzie a tag

- Button without link: only need to add class

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.