Slider and action button on mobile

Dazzling
1

Hi!
I am trying to optimize for mobile, I am having a little trouble with the action button and the slider.

I’d like the action bar to be a bit smaller on mobile than it currently appears, but no matter what I do it messes up other things around the theme (the right rail on posts, the search button etc)
I’d like the text and the button to be all lined up on the same line and decrease the height of the action bar slightly.

I’d also like to know if it’s possible to make the slider images on mobile bigger? They are so dynamic and rich on desktop but tiny slivers on mobile (I’m using an iphone6).

Appreciate any guidance
My site is https://zanis-demo.000webhostapp.com/

Thank you!

2

Hi @shetlandshake,

Use this css code for action button and the text to be align:

@media (max-width: 768px)
.cfa-text }
 float: left;
{
.cfa-button {
     padding: 8px;
}
/*for images*/
.flexslider .slides img {
height:250px;
}
}

thanks,
Cristian

3

YAAASSSS!!! Button is fixed!
I had to alter that code a little bit because of the custom CSS I already had in there
I used

.cfa-text{
 font-size: 14px;
float: left;
position: absolute;}

.cfa-button {
     padding: 8px;
	float: right;
}

That seems to do the trick without breaking other buttons/modules around the site

Thank you for setting me on the right path, Cristian!
You rock

~ShetlandShake

4

Re: Slider images though
That did not work as well -
It shrunk the slider images on the desktop and stretched them without keeping the aspect ratio on mobile

5

Hi,

Use the min width, my bad:

@media (min-width: 375px){
.flexslider .slides img {
height:250px;
}
}

thanks,

Cristian