Cornerstone is not displaying well

Support
#1

Hi,

I’m trying to edit my pages to be responsive to every format (laptop, tablet and cell). When I’m editing my pages in cell format on cornerstone, it appears perfectly! Then I try opening the same page on my cell and everything displays wrong. Images are pushed to the right, text to the left, etc. Why does it show good on conerstone when editing from a cell display, but when you look it up on a real cell it doesn’t look nearly the same.

I do not own a tablet and when I look how my website looks from tablet displays in cornerstone it looks good, but how can I know for sure now that I know cornerstone screen displays might not reliable? Someone visiting my website from tablet or cell will leave immediately because of that problem.

#2

Hi @Stephanie

Thanks for reaching out.

Would you mind providing a screenshot of what you’re seeing? I checked your site on my phone and it looks perfectly fine. Texts are all centered with proper layout and backgrounds.

Thanks!

#3

It looks fine because every time I made a modification on cornerstone I had to refresh my homepage on my cell to be sure what I did was okay. Here is what it looks like from my desktop on cornerstone and here is how it appears on my iPhone.

As you can see, I can ever know if the modifications I made on my desktop worked. I always have to refresh the page with my cell for everything I do. The first picture is from my iphone and the second from my desktop

#4

Hi Stephanie,

I see there is a lot of broken HTML markup on your page content, but I could not pinpoint it. Please check, check all your HTML markup content here and resolve all syntax error. Make use of that tool, that would be very helpful. Just paste your content between the <body> and </body> tag. An x mark will show up on the left side with information if it detect an syntax error on your content.

If you don’t find anything unusual please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#5

I guess it refers to the javascript I used and im not sure if I did it right, but I changed the javascript I wrote based on the tool your gave me.

Even though I checked all my codes and it seems there are no more errors, I still have the same problem with how cornerstone displays my homepage in mobile. I still see the same thing

#6

Hi @StephanieBelec,

The preview on the builder is a general preview for mobile since there are many kinds of mobile phone.

The issue I’m seeing are added paddings and negative margins which I think meant for desktop but also affecting the mobile view. If you intend to have different padding and margin for each device then I recommend applying them through CSS. The 4th section has padding: 150px 40px 150px 70px; padding, then inspect that section and set the padding to just 20px, then add this CSS

@media ( min-width: 980px ) {
$el {
    padding: 150px 40px 150px 70px !important;
}
}

This will make the bigger padding applied for desktop while 20px on mobiles. This will help you creating your own CSS too https://developers.google.com/web/tools/chrome-devtools/beginners/css. And you can also utilize $el as current element selector.

I’m still seeing malformed content and elements.

<Strong>Coming soon!

You have added <strong> as opening but never closed it with </strong>. Please fix that as well.

Thanks!

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.