Standard layout: the text is half-width in mobile version

[realokun]

When I load the list of Standard layout blog posts to mobile browser, the text appears to be half-width of the post, see attached. Please fix.

Attachments:

You must be logged in to view attached files.

[Laura]

Please share a link to your site, in my side its working well.

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 🙂

[realokun]

http://www.spokescommute.com/

[Laura]

Hello, seems like you fixed it? because i see it fine.

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.

[realokun]

No it has not been fixed.

Laura, based on your screenshot you are not accessing the web site from a mobile device.

To replicate, take an Android phone, use Chrome browser to navigate to http://www.spokescommute.com/

Alternatively, if you have a desktop browser available only, navigate to the above URL, then drag the browser window to make is narrower until the site’s layout changes to mobile. Then you’ll be able to observe the layout bug I reported.

[Laura]

Hello, got it, you had a margin-left set, add this to style.css in child theme

COPY CODE

.posts-listing.standard-listing.with-meta .article-content {
margin-left: 0px !important;
padding: 0 0 0px;
}

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.

[realokun]

Laura, your fix broke the non-mobile layout, see the screenshot.

Attachments:

You must be logged in to view attached files.

[realokun]

which should look like this

Attachments:

You must be logged in to view attached files.

[Abe]

It is strange since by default it does not act like that
Laura’s css should work but it needs to be restricted only to mobile, something like this:

COPY CODE

@media screen and (max-width: 767px) {
.posts-listing.standard-listing.with-meta .article-content {
margin-left: 0px !important;
padding: 0 0 0px;
}
}

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[realokun]

Thanks Abe, I put your CSS in place, but it didn’t fix the problem. It is still there, you can see for yourself.

[realokun]

By the way, here is all the custom css I have in the child theme. Perhaps you can spot some problem there?

COPY CODE

article .article-meta .post-meta a.post-time:after
{
padding-left: 2px;
}
div .wp-caption {
margin-left: 15px;
}
.template-page {
padding-top: 10px;
padding-bottom: 10px;
}
h1 {
margin-bottom: 5px;
}

/*
To move logo closer to the left, default 15px
To move menu closer to the right 
*/
#header .kleo-main-header .container {
  padding-left: 5px;
  padding-right: 5px;
}
/*
* To space menu items closer
*/
.navbar-nav>li>a {
margin: 0 5px;
}

/*
* To remove a huge gap between posts in Standard layout
*/
.posts-listing.standard-listing.with-meta .article-content {
  margin-left: 130px;
  padding: 0 0 0px;
}
.posts-listing.standard-listing.with-meta .type-post {
margin-bottom: 0px;
}

/*
* To remove a 130px left padding in Standard layout on mobile
*/
@media(max-width:767px) {
  .posts-listing.standard-listing.with-meta.article-content {
    margin-left: 0px !important;
    padding: 0 0 0px;
  }
}

[realokun]

Ok, I got it: just had to remove this line from my custom css:

margin-left: 130px;

[Author]

Posts