Change Slider Dimensions

How can I change the slider demensions on the front page in a way that the mobile theme will respond to?

I changed the dimensions in css but it does look good on my phone...

 

Hello,
Could you please send us your website link.

 

Hi I would like to actually "slow down" the rotation speed of my slider that the images transition to (if that makes sense)

where in the theme editor / code do i do this?

Sorry for not posting in a new thread, i just thought it was such a close subject.

AWESOME theme by the way! please pass on my congratulations to the creators! its the best one I have bought to date, I will be looking at ink htemes first next time i need one in the future, great stuff!

the site is
http://contentlogistics.com.au

 

Sorry Piyush, new to all of this. I am using a child theme of Themia Pro at
http://cem.carrielizabethmarketing.com

I took the slider code and moved it the header changing the "355" height value to "110" for all 4 slides.

I also changed the height value of these attributes in css:


#slides {
top:15px;
left:4px;
z-index:100;
height: 110px;
}
#slides img {
width: 928px;
height: 110px;
}
#slides iframe {
width: 928px;
height: 110px;
}
.slides_container {
overflow:hidden;
position:relative;
display:none;
height: 110px;

I also see the attributes for (what i think is) the mobile responsive code under

"/* This query is applied for protait ipad, Mobile*/" in style.css but I am not sure what values to use for height.​

Not sure if I am way off base with this...I am new to code and learning so much through the altering of your beautiful themes!

Thanks,

 

Go to Js > Custom.js present in your theme directory
and adjust the value of Play by increasing the value the slider speed decreases,and by decreasing the value the slider speed increases .

Sending image for reference

 

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 960px) and (min-width: 767px){
#slides img{
width:735px!important;
}
}
 
@media only screen and (max-width: 767px) and (min-width: 480px){
#slides img{
width:449px!important;
}
#main {
height: 110px;
}
}
@media only screen and (max-width: 480px){
#slides img{
width:253px!important;
}
#main {
height: 110px;
}
}

This will solve your issue.

 

Yes it did! Ty again.

Is there a way to tighten up the space between the slider and the header logo and menu? I do not mind removing the shadow under the slider if that is needed.

 

Hello,

I have checked your site and i think you have removed spacing by yourself.
Please do contact for further queries.

 

Hello again! I am still getting a large space between the slider and the menu/logo when viewing the site on an ipad. I have moved the slider code to the header.php using a child theme.

The site is http://carrielizabethmarketing.com. I have applied the css mentioned previously in this post but the issue persists. How can i fix it?

Thanks!

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 960px) and (min-width: 767px){
.slider_wrapper {
width: 758px;
height: 0px;
}}

 

Thanks!

I had to switch it to:

@media only screen and (max-width: 960px) and (min-width: 767px){
.slider_wrapper {
width: 758px;
height: 135px;
}}

and the issue was solved!

Thanks again for your quick reply.