Post Images

[clydehill]

Hello, how do you make the post images on the front page go full-width in mobile view (touch the edge of the screen)? I would like for the images to go full width in mobile view, but keep there padding in desktop view.

 

Thank you in advance

[Laura]

Hello, you could add a custom class to the element, then use a mobile only css with padding 0
For example:
the element class would be mobile-padding
then for mobile only effect:

COPY CODE

@media (max-width: 991px) {
.mobile-padding {
padding:0px !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 🙂

[clydehill]

Thanks Laura!

Are these the steps?
1. Create Class name in Element under Kleo Post settings “Extra Class name” called “mobile-padding”
2. Paste the code you wrote above into Quick CSS

Did I get that right? 🙂

[Laura]

Hello, it could work, if not, share the url with me and i will give you the exact code, as it was an example 🙂

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 🙂

[clydehill]

Thanks Laura.

This is just the out of the box Code Template for the Kleo Pinterest theme. http://seventhqueen.com/themes/kleo/pinterest/ We are experimenting with the Kleo theme. To confirm I am looking to remove the padding inside the box for each post so that when it is in mobile view it goes full-width to the edge of the screen,but when in desktop it stays as is. As you can see from the URL, when you put it so mobile view. There is a padding from the edge of the browser to the image, I would like for it to go all the way with any white space to the left or right.

Thanks in advance!!!

[Laura]

Hello, try by adding this to the style.css of child theme

COPY CODE

@media (max-width: 991px) {
.posts-listing.responsive-cols.kleo-masonry.per-row-4.with-meta.masonry-listing article {
    padding: 0px !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 🙂

[clydehill]

Hi Laura, thank you for the response. I have tried pasting the above code into the child style.css and didn’t see a fix. I have attached a screenshot and framed a red border around the area to confirm we are on the same page. I am trying to remove the white space/padding so the post images go full width.

Thank you in advance.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, have you tried clearing the cache?
If you did but didnt work, please share admin credentials so i can do it for you 🙂

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