Change Theme Width

I would like to make the theme smaller so that I can see more of the background.
The site is www.playtennisinthesun.com. I would like to see all of the tennis ball at the top, bottom and sides if possible.
Also is it possible to change the colour of the header and the background colour of the menu.
Many thanks
Yvonne

 

Hello,
Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.container_24
{
width:960px;
}
 
.container{
margin-top:125px;
}
.footer-navi
{
margin-bottom:75px;
}

Thanks & Regards
Pramod

 

Many thanks Pramod, it worked perfectly.
Just one other question, can I change the white background where the menu is located to another colour, for me there is too much white space, I would like to add a little colour.
Regards
Yvonne

 

Hello Yvonne,

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.header .menu-bar {
background: rgb(197, 209, 3);
}

You can change color which i given above as per your requirement.

Thanks & Regards
Pramod

 

Hello Pramod,

I also want to reduce the width of theme and followed your instructions above.

But as you can see alreday on Yvonne's page the images of the slider don't have the same aspect ratio as before.

Is it possible to prevent the autoadjustment to the biggest width?

Because in that width the slider images are scaled up and become fuzzy.

Thanks and Regards,
Matthias

 

Hello Matthias,

You have to add images as recommended on theme options other wise it will stretch or transform.
Slider width is fixed and will not changed according to image.

Thanks & Regards
Pramod

 

Hello Pramod,

thanks for the quick respond.

I added the images as recommended and they are perfectly shown with the right aspect ratio. But NOT in a width browser window.

Just have a look at Yvonne's home page when you change the width of your browser window. You see the height of the slider image changes?

@Yvonne: I'm sorry to use your home page but mine is not yet ready to go online...

​

​

Thanks and Regards,
Matthias

 

Hello Matthias,



The height is changed because it automatically adjust the height and width according to device.
When you re-size your browsers or decrease the width it will automatically re-size the images.

Thanks & Regards
Pramod

 

Hello Pramod,

sorry for my persistence, but I am still not satisfied.

I do not want every visitor to re-sizes the width of their browser...

Is ist possible to prevent the auto-adjust of the height of the slider image?

Or maybe fix the size of the slider?

With the code above you already fixed the width of the theme, so it is not really responsive any more.

Regards,
Matthias

 

Hello Matthias,

If you want website responsive it will vary on screen of device mobile tablet etc.
It is not necessary that people re-size their browser or screen width.

Thanks & Regards
Pramod

 

Hello Pramod,

with the code above you already fixed the width of the theme, so it is not really responsive any more:

Code:

.container_24
{
width:960px;
}

Just the content inside the container is responsive and that is why only the heigth of slider image changes but not the width.

And yes, it is necessary that people need to re-size their browser or screen width. Otherwise the slider image has a wrong ratio, as you can see at the two images I posted above.

Ragards,
Matthias

 

Hello Matthias,

Please provide URL of your website .
By the way theme is responsive and it cannot be changed only for slider.

Thanks & Regards,
Pramod

 

Hello Pramod,

http://quinta-no-estaco.com/

Here are again some examples:

​

​

In the second image the silder height is bigger. The width is fixed the your code you gave Yvonne above.

Regards,
Matthias

 

Hi Matthias,

Recommended size of image are 960px X 460px.

So, please use image of the above dimension.

Also, paste the code given below in custom css.

Code:

.slide-img {
width: 960px;
height: auto;
}

Thanks
Praveen

 

Hello Pravee,

thanks, that is exactly what I wanted!

Is it possible to align the shadow back to the image (see attached image "Shadow")?

Just a hint: The recommended size is 897px x 355px (written in Theme Options, see attached Image "Recommended Size"). So maybe you should change this.

Thanks a lot and Best Regards,
Matthias

 

Hi Matthias,

Please paste the code given below in custom css.

Code:

.slides_control {
min-height: 384px;
}

Note: You can increase or decrease the min-height according to your need.

Thanks
Praveen