Docs

[owaves]

Hello,

I am having issues with my site’s blog on mobile. I have been able to design the other pages onto mobile with corner stone but this page I can’t. What are my options and or how do I make this happen? I would greatly appreciate any help!

[owaves]

This reply has been marked as private.

[owaves]

Page is located at http://www.owaves.com/x/blog

[Rad]

Hi there,

Archive pages like the blog page aren’t editable in the Cornerstone. They are simply page with listing and only editable through templates.

Thanks!

[owaves]

Okay, could you tell me what I need to do to edit it for mobile? Do I call it with an “@media” selector?

[Friech]

Hi There,

It depends, would you mind to clarify what are the edits you want to make on archive pages?

Thanks.

[owaves]

Yes I would like to resize everything down to fit on mobile. I’d like to have all the content stack like it does on the mobile view of home page. For example Header h1/Image/Header/text.

[Rupok]

Hi there,

It seems you are breaking the usual responsiveness by using some custom CSS that applies static width for the container and elements. That’s not a good practice to set static width like 620px.

However you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry {
  width: 100%;
}

h2.entry-title {
  margin: 20px auto;
  text-align: center;
  width: 100%;
}

.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry p.p-meta {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.entry-content.excerpt {
  margin-left: 10px;
  width: 100%;
}

.entry-content.excerpt p {
  margin-top: 10px;
}
}

Hope this will solve the issue for now but your custom CSS are really messy and using negative margin, absolute positioning that’s not a good practice at all. You should be careful if you want to keep the responsiveness for all screen size.

Hope this makes sense.

[owaves]

What is the best practice? Would it be using percentages on widths? How can I clean my css to make sure it is top notch?

[Joao]

Hi There,

% is better than px because it is not an absolute measure.

Hope it helps

Joao

[owaves]

Thanks, that is what I thought. I only used position absolute on the meta tags and the social buttons because I don’t know how to move them in the html, I am unfamiliar with php so editing the content is something I am struggling with. If you could tell me how to fix this/ alternative method for displaying the elements in the way I need them that would be great. You guys have been a huge help!

[owaves]

from comment above: “If you could tell me how to fix this/ alternative method for displaying the elements in the way I need them that would be great.” The tech who looked at my css told me that negative margin/position absolute is bad practice. I am aware that percentage is better but could you be more specific?

[Friech]

Hi There,

X|Theme is responsive by default, so you should not applying widths and negative margins on its element or container. We need you to remove those custom widths and margins, not just the negative margins but the huge margins as well. I did check your site and here some of those custom CSS that broke the responsive of your site.

.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry {
  width: 620px;  
  margin: 0 auto;
}

h2.entry-title {
    margin-bottom: 40px;
    margin-left: -75px;
    margin-top: 40px;
    text-align: center;
    width: 775px;
}

.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry p.p-meta {
  margin-top: -15px;
  margin-left: -90px;
  position: absolute;
  width: 775px;
  text-align: center;
}

.entry-content.excerpt {
  margin-left: 10px;
  width: 620px;
}

.more-link {
  margin-left: 255px;
  margin-top: -20px;
}

.entry-title {
  font-size: 3.345em;
  width: 100%;
  margin-bottom: 138px;
  text-align:center;
}

After that check your entire custom CSS here: http://csslint.net/ and see if you have an syntax error in there.

This might make or break your blog page, but lets take it from here to style your pages accordingly.

Thanks.

[owaves]

Okay I removed the widths by commenting them out for now. It definitely breaks the site’s intended look. How can I achieve the same styling as before? I need the .entry-title to center, and everything to look as it did before..What about inline styles added through cornerstone that are using widths and px? I ran the code through the validator and had one error as seen in the image attached.

[Friech]

Hi There,

Regarding the error, please look for this block and remove the space between 88 and %

.x-container.width {
  width: 88 %;
}

And also remove the f at the bottom of your custom CSS.

You can center your entry title with this custom CSS

@media (max-width:  767px) {
	.blog .entry-title {text-align: center;}	
}

I’m sorry, I am not sure how the page blog look before as I’m seeing it as not responsive. Please clarify how do you want it to look.

Thanks.

[Author]

Posts