[Robert]

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?

[Mahesh]

Hi @Robert,

Please post in your site url.

Regards,
Mahesh

[Robert]

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/

[Mahesh]

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

[Robert]

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

[Sakin]

@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.

[Robert]

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

[Danielle]

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

[Sakin]

@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

[Danielle]

@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

[Sakin]

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

[Author]

Posts