Image slider

robbiemk · Member · Jan 7, 2016 at 1:40 am
Copy link

Add topic to favorites
> I have done some css customization to my premium zuki .all work fine on desktop computer but there is a problem on mobile the pics slider look distored.please help

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 8, 2016 at 2:15 am
Copy link
Hi, you have the height in the following custom CSS rule set to 470px. which is a static value so it is forcing the image to keep that height, regardless of width thus creating the distorted image. Set it to auto instead like this.
```
.attachment-zuki-fullwidth, .size-zuki-fullwidth.wp-post-image, .flexslider .site-header {
    height: auto;
}
```
robbiemk · Member · Jan 8, 2016 at 2:33 am
Copy link
Great.thanks so much!
robbiemk · Member · Jan 8, 2016 at 6:19 am
Copy link
after using ur script, the image no more look distorted on mobile but still a problem, the featured image look blur and the text and header (title) not in place , when view it on mobile.
robbiemk · Member · Jan 8, 2016 at 7:29 am
Copy link
the layout of my website look fine on theeeee desktop, but on mobile and tablet and laptop look distorted and different. any further help?
thesacredpath · Member · Jan 8, 2016 at 10:09 pm
Copy link
There are some things in your CSS that are overriding some of the slider element CSS and causing some issues with the block of text that contains the title, date and excerpt. Let’s try this. Replace this rule in your CSS
with this
```
.widget_zuki_recentposts_big .rp-big-one-content .story,#featured-content .rp-big-one-content .story {
	max-width:350px;
	max-height:470px;
	position:absolute;
	top:15px;
	right:1px;
	padding:0 20px;
	background-color:#;
	width: 100%
}
```
and then replace this
```
.wf-active #featured-content .rp-big-one-content h2.entry-title,.wf-active .front-fullwidth .rp-big-one-content h2.entry-title,#featured-content .rp-big-one-content h2.entry-title,.front-fullwidth .rp-big-one-content h2.entry-title,.wf-active h2.entry-title,.wf-active .front-fullwidth .rp-big-two-content .entry-header h2.entry-title,h2.entry-title {
	font-size:30px
}
```
with this

@media screen and (min-width: 1260px) {
.wf-active #featured-content .rp-big-one-content h2.entry-title,.wf-active .front-fullwidth .rp-big-one-content h2.entry-title,#featured-content .rp-big-one-content h2.entry-title,.front-fullwidth .rp-big-one-content h2.entry-title,.wf-active h2.entry-title,.wf-active .front-fullwidth .rp-big-two-content .entry-header h2.entry-title,h2.entry-title {
font-size:30px
}
}
`
robbiemk · Member · Jan 9, 2016 at 8:42 am
Copy link
great, thesacredpath. the featured content issue solved using your rule, but still a slight isue there, the featured image slider size look smaller than the rest on mobile and not fit in place.
thesacredpath · Member · Jan 9, 2016 at 7:06 pm
Copy link
That is because you have it set to 70% width in your custom CSS. We can use a Media Query to limit that 70% width to 768px and wider screens. That is the point where the posts below the slider go to full width.

Find this rule in your custom CSS
```
.attachment-zuki-fullwidth,.size-zuki-fullwidth.wp-post-image,.flexslider .slides img {
	width:70%;
}
```
and replace it with this and see what you think.
```
@media screen and (min-width: 768px) {
.attachment-zuki-fullwidth,.size-zuki-fullwidth.wp-post-image,.flexslider .slides img {
	width:70%;
}
}
```
robbiemk · Member · Jan 10, 2016 at 4:23 am
Copy link
great! got it. thanks
robbiemk · Member · Jan 10, 2016 at 4:34 am
Copy link
the only thing now is : how to place the text content slider under the images slider, instead of being on top of the images, on mobile?
thesacredpath · Member · Jan 10, 2016 at 5:18 am
Copy link
Give this a try and see what you think.
```
@media screen and (max-width: 479px) {
	.rp-big-one-content h2.entry-title {
		position: absolute;
		bottom: -230px;
		left: 0;
	}
}
```
Add it to very bottom of your custom CSS.
robbiemk · Member · Jan 10, 2016 at 5:37 am
Copy link
yes, it works. the content slider title is now under the images, but the next previous buttons are hiding the text title. how to push these scrolling buttons arrows up ?
robbiemk · Member · Jan 10, 2016 at 5:41 am
Copy link
it s ok i put it at : bottom: -250px;

now it s ok. thanks so much
robbiemk · Member · Jan 10, 2016 at 5:57 am
Copy link
now my front page layout look very nice on both desktop and mobile . u really helped a lot, appreciate it!
thesacredpath · Member · Jan 10, 2016 at 7:27 am
Copy link
Awesome, and you are welcome.

No items found.