How to make featured slider image width of screen?

This topic has 10 replies, 4 voices, and was last updated 8 years, 9 months ago by Sakin.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
December 29, 2015 at 11:15 am #81813

Robert
Participant

Is there a way to make the featured slider image the full width of the screen, so there are no margins on the sides on the home page? So if you increase the size of the screen, the image increases in size as well?

December 29, 2015 at 1:46 pm #81820

Mahesh
Participant

Hi @Robert,

Please post in your site url.

Regards,
Mahesh

December 29, 2015 at 11:56 pm #81843

Robert
Participant

Thank @Mahesh. So I’m hoping to get the featured slider to look something like this ******* or ******. Also wondering about removing space between featured slider and featured content. My site is: http://www.theshokoshow.com/

December 30, 2015 at 10:32 am #81891
Mahesh
Participant
Hi @Robert,

For removing space between featured slider and featured content, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” and add the following CSS.
```
#feature-slider{
    padding-bottom: 0;
}
```
For full-width slider, Sakin will answer it, its a bit complicated.

Regards,
Mahesh
December 30, 2015 at 7:00 pm #81920

Robert
Participant

Thanks @Mahesh, it worked! I’ll look forward to Sakin’s response.

December 31, 2015 at 3:52 pm #81966
Sakin
Keymaster
@treboroom: Hi Robert,

The site you are referring to uses Full Width like our theme Clean Journal Pro, Full Frame Pro, Catch Flames Pro and Adventurous Pro. Check out at http://catchthemes.com/themes/category/premium/. But Catch Responsive Pro uses maximum fixed width. So, changing to this theme will be little difficult and you need lot of custom css. Best is to change the theme. Otherwise, try the following css:
```
.site {
    width: 100%;
}
#feature-slider .cycle-slideshow {
    max-width: 100%;
}
#feature-slider .cycle-slideshow img {
    width: 100%;
    height: auto;
}
/* 460px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    margin: 0 auto;
    width: 460px;
}
/* 520px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 520px;
}
/* 560px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 560px;
}
/* 660px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 660px;
}
/* 740px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 740px;
}
/* 960px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 960px;
}
/* 1040px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 1040px;
}
/* 1100px; */
@media screen and (min-width: 1100px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 1100px;
}
/* 1200px; */
@media screen and (min-width: 1200px) {
#header-featured-image,
#masthead,
#promotion-message,
#featured-content, 
.site-content,
#colophon {
    width: 1200px;
}
```
Sorry, I cannot make 100% sure about this css. It’s advance.
January 4, 2016 at 9:44 pm #82178

Robert
Participant

Thank you very much, @Sakin, I will give it a try

February 10, 2016 at 12:48 am #85046

Danielle
Participant

Hello,

The featured image slider at the homepage is only partly visable when viewed on a mobile phone. The images ar cut in half (sorry for my English..). Can you please help me out? This is my site: http://www.daniellebosveld.nl
Thank you in advance!
Kind regards, Danielle

February 10, 2016 at 2:30 am #85050
Sakin
Keymaster
@dan-vermeerupcmail-nl:
Hello Danielle,

It’s because of your custom css. So, to correct that add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
.site {
    margin: 0 auto;
    padding-top: 88px;
}
#fixed-header {
    top: 0;
}
```
Regards,
Sakin
February 10, 2016 at 11:47 pm #85127

Danielle
Participant

@sakin
Thanks for your reply. By adding the css the image slider doesn’t show up at all on my homepage when viewing on a mobile phone. Is there any other way so the slider is visible?
Regards, Danielle

February 11, 2016 at 12:22 pm #85191

Sakin
Keymaster

@Danielle: I can see it. Did you refresh your browser after adding that css in “Custom CSS” box:
Author

Posts