Blog carousel on frontpage is cut off

[veggist]

Hi there!
On http://veggistreff.com/ the blog carousel gets a bit cut of. The meta end read more shows up when the page loads, but disappears right after. This accured when I put in a field for facebook and twitter buttons underneath:
[kleo_section centered=1 border=1]
[kleo_row] [kleo_one]
[kleo_h2] Les bloggen vår [/kleo_h2]
[/kleo_one]
[kleo_one][kleo_posts_carousel limit="3" post_formats="all"]

[/kleo_one]
[/kleo_row][/kleo_section]

[kleo_section centered=1]
[kleo_row] [kleo_one]

[kleo_button url="https://www.facebook.com/veggistreff" style="standard" size="standard" round="0" icon="facebook,before" target="_blank"] Følg oss på facebook [/kleo_button]

[kleo_button url="https://twitter.com/Veggistreff" style="secondary" size="standard" round="0" icon="twitter,before" target="_self"] Følg oss på Twitter [/kleo_button]

[/kleo_one]
[/kleo_row][/kleo_section]

[Laura]

Hello, please add this css to your style.css or quick css of child theme

COPY CODE

.caroufredsel_wrapper {
  height: 400px !important;
}

Let me know if it helps! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Hi again @Laura!
Have tried your css snippet now, didn´t help. Alsto tried to increase it to 600px but no improvement. Then I deleted the section with the facebook and twitter buttons underneath, since the problem accured when I added them, that did not help either.
As I look on http://veggistreff.com/ there is a thin line under the blog carousel (see att. image) and I`M not sure what that is, bit it was not there before. Maybe that´s meesing up the blog carousel?

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, that thin line is the section border, part of the shortcode. Can you share admin credentials so i can add the css and tet it? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

This reply has been set as private.

[Laura]

Hello, jut tested the same code i sent you and it working, try to clear your browser cache using CTRL+F5 in your website

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

You are correct, thanks a lot, Laura 🙂

[veggist]

Is there a way to increase the hight on the carousel images?

[Laura]

Hello, do you mean the image size? or the post size of the carousel?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

I mean the image size in the blog carousel, @Laura. The rest (post meta) is fine

[Laura]

Hello, please try with:

COPY CODE

ul.feature-stories img {
  width: 380px !important;
  max-width: 500px;
}
.carousel-stories {
  overflow: hidden;
  max-height: 394px;
  clear: both;
  padding-top: 20px;
  width: 1500px !important;
  margin-left: -150px !important;
}
.caroufredsel_wrapper {
  height: 600px !important;
  width: 1350px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Hi again @Laura
Sorry for the very late reply on this, but I have been sick for some time

I have tried theese css codes now, and they did not give the desired result
When I tried the whole section;
ul.feature-stories img {
width: 380px !important;
max-width: 500px;
}
.carousel-stories {
overflow: hidden;
max-height: 394px;
clear: both;
padding-top: 20px;
width: 1500px !important;
margin-left: -150px !important;
}
.caroufredsel_wrapper {
height: 600px !important;
width: 1350px !important;
}

it caused the mobeilview to be very “off” in chrome, see imagees, and is slightly left alinged in desktop view

When I only use
.caroufredsel_wrapper {
height: 600px !important;
width: 1350px !important;
}
the post mega is displayed good, but the image hight is not som high as we wanted it (it´s still 300 insted of 394px)

At the moment I`m using only;

.caroufredsel_wrapper {
height: 600px !important;
width: 1350px !important;
}

If you could help me get this adjusted so the images are 394px high and workes nicely both on chrome and firefox in mobileview, I would be very gratefully 🙂

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, welcome back 🙂 Hope you are feeling better.
The css is only on mobile right? You want it to look like the first attachment?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Hi @Laura, thank you 🙂

I see now after the latest chorme fix, it shows ok also in chrome, so the only thing I need to fix is the blog image in the carousel being 394px high!

[Laura]

Hello, you want to make the images 394 high only mobile view?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

No, 394px high in normal view, I guess they will scale down on mobile view?

[Laura]

Hello, used this in style.css

COPY CODE

@media screen and (min-width: 800px) {
.carousel-stories.responsive {
    width: 1500px;
    height: 1000px;
}
.carousel-stories {
    overflow: hidden;
    max-height: 594px;
    clear: both;
    padding-top: 20px;
}
.kleo-carousel {
    height: 600px;
    width: 1400px;
    margin-left: -30%;
}
.caroufredsel_wrapper {
    height: 600px !important;
    width: 1550px;
}
ul.feature-stories li {
    width: 594px;
}
.carousel-stories li {
    text-align: center;
    max-width: 526px;
    padding: 0 8px;
    display: block;
    float: left;
}
a.imagelink {
    width: 494px;
}
img.attachment-blog_carousel.wp-post-image.lazyloaded {
    width: 494px;
    height: 394px;
}
}
@media only screen and (max-width: 940px) {
.caroufredsel_wrapper {
    height: 600px !important;
}
}

Do you like it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Hi Laura. No, this got to big, and on Androin 1+” portrait the page acts wierd and on iPad2 it gets to broad. See att. images

Attachments:

You must be logged in to view attached files.

[veggist]

Sorry for the typo, I mean Android 10″

[Laura]

Hello, i see, so better a bit more small or like it was before? its a bit difficult to re-escale that, let me know if you find more issues in mobile devices so i can check it out

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Well, the problem now is that the blog carousel images are so big they break the layout on the rest of the page in mobile devices (below 960px), so if you manage to adjust thi, it would be grat. And if possible, below 768px, the blog posts stack one one in widht, if you understand me?

[Laura]

Hello, is it better now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

I can´t see any changes on the front end. Did you do any changes in the css after ticket #78936

[Laura]

Hello, yes i did, did you try cleaning your browser cache?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[veggist]

Ok, I see
I looks nice on desktop and ok on mobile. But on tablets in landscape view, the page does not fill properly. I have only tested it on a Samsung Galaxy Tab Note, 10.2″, but the chrome inspector in device mode showes the same on iPad. It makes the carousel full width, but not the rest of the page. Please check out this on simular divices if you have access and try to fix it so it showes full width

Best, Frode

[Laura]

Hello, made some adjustments, does it look better now? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[veggist]

Yes, now it´s working nicely on iPad and other tablets so I think thats a “keep” 🙂
Thanks alot for your efforts Laura, great service !

[Laura]

Hello, glad it worked! Let me know if you need anything else 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts