how to make Slidder bar no span full page

Activello
1

How do i make the slider bar image not span the full page? I have attached an image of how I would like my slide bar to look.

Thank you,
Nathalie

2

Hi Nathalie,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.top-section {
    width: 1090px;
    max-width: 100%;
    margin: 0 auto;
        padding-right: 15px;
    padding-left: 15px;
}

Best Regards,
Movin

3

Thank you Movin! It worked perfectly!
In order for me to change the height of the featured image, do I use that same code? And if so what numbers do I change? Or do I change the size of my featured image?

Thank you!
Nathalie

4

Hi there,
Thanks for keeping in touch with us.

That depends on what instance of the featured image it is that you’d like to change the height on. Would you like to change it on the homepage, in an archive or on the post itself.

Let me know this, and perhaps, provide a link to the page and I’ll provide you with the CSS that’s necessary for this.

I look forward to your reply :slight_smile:

Best Regards,
Support

5

thank you for getting back to me!
I would like to change it in the slider bar of the homepage. http://apinchofaustria.com

Thank you so much for all your help!
Nathalie

6

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.flexslider .slides li img {
    height: 360px!important;
}

Please let me know if there are any more questions that I may answer for you :slight_smile:

Best Regards,
Support

7

Thank you for your help! It worked wonderfully on the computer view, however when I look at my page on my phone the image looks very stretched and huge. How can I make it so only the size of the image on the computer view changes and the mobile device view stays as it was before?

Also, now that I made my image larger is there a way I can center the title of the post and the ‘read more’ on the slider bar?

Thank you!
Nathalie

8

Hello there,

Please try replacing the top section’s CSS code with the following code:


@media screen and (min-width: 1000px) {
.top-section {
    width: 1090px;
    max-width: 100%;
    margin: 0 auto;
        padding-right: 15px;
    padding-left: 15px;
}
}

As it relates to the title and " read more", the both appear to be centered already.

Best Regards,
Support

9

thank you for getting back to me. Unfortunately even with this code when I open my page on my website the slider bar is stretched. Is there a way i can only change the size of the slide bar when viewed on a computer screen and have it remain small when viewing on a cell phone?

I have attached the image of how it appears when looking at it on a cell phone.
You can check out how it appears on a computer screen by going to http://apinchofaustria.com

thank you!
Nathalie

10

Hi there,
Thanks for keeping in touch with us.

Since the first code worked on desktop, we can go ahead and create a media query for that:

@media only screen and (min-width: 992px){
.flexslider .slides li img {
    height: 360px!important;
}
}

Just replace the initial code with the one above. That should essentially bring you back to how it was initially, but add the rule for desktop only.

I hope this helps :slight_smile:

Best Regards,
Support

11

Thank you!!! The code worked perfectly!

One last question. Is there a way I can have the title of my post and the read more text show up on my slider when I look at my page on a cell phone?
Currently I only see the text when I am viewing my site on a computer.
I have attached a screen shot of how the slider bar appears on my cell phone.

Thank you so much!!!

Nathalie

12
One last question. Is there a way I can have the title of my post and the read more text show up on my slider when I look at my page on a cell phone?

You can use below custom CSS code to achieve this.

#page .flex-caption {
    display: block;
}
13

Thank you Movin for getting back to me!

The code you sent me worked, however the size of the text was HUGE.
I have attached a screen shot of how the text on the slider appears on my cell phone with this code.
Is there a way I can change the font size of the text on the mobile device only?

Thank you!
Nathalie

14

Hey there,
Hope you’re doing well today

The CSS below should take the font size down a notch. Just add and it to Appearance > Customize > Additional CSS:

@media only screen and (max-width:500px){
  .flex-caption h2{
    font-size: 18px!Important;
  }
}

@media only screen and (max-width:500px){
  .flex-caption .read-more a{
    font-size:13px!important;
  }
}

I hope this helps :slight_smile:
Best Regards,
Support