Mobile View Of Blog Looks Terrible

When I go the mobile view of my blog, the text is tiny on the screen and the photo is huge. I want the text and photos to be formatted nicely so they both fill the mobile screen- no more, no less.

I don't want to make the photo smaller because then on the desktop version the photo will look really small.

What can I do to make the mobile version look well made/formatted??

Edited by

See attached screenshot

Edited by

The photo lost the code to make it responsive.

Go to Design -> Header & Footer. Click on the SCRIPT tab. Copy and paste the following code into that section. Should make those photos responsive.

$(document).ready(function(){
$("#blogPage img").each(function(i){
$(this).css({"max-width": "100%"})
});
});
$(document).ready(function(){
$("#standardPage img").each(function(i){
$(this).css({"max-width": "100%"})
});
});

Edited by

I put in the code and it’s still not working. Currently looks like this...

Also, why does my logo look small on mobile? I had my full size logo file on there that I had originally uploaded for desktop, but just tried now putting in a mobile specific file at 220px and it didn’t even change.

Edited by

screenshot

Edited by

When photos are uploaded in the text editor, it adds code to make it responsive (size to the screen). For some reason that photo has lost that code.

When editing that page, click the HTML icon < > and look for the <img src="" tag, and add this tag to it

style="width: 100%;max-width: 800px; height: auto; margin: auto; display: block;"

That will make it size to the screen.

Edited by

Still not working. I tried adding that tag and it just made the photo completely invisible now. Now what....

Is changing the photo size going to make the text larger as well? Because there are 2 problems that I see- the photo is too big and the text is too small.

Additionally, I just checked and the same issue is happening on other pages on my mobile site. The Inquire and About page (the pages where there are text and photo), the text and header aren't filling the screen.

Edited by

If it is not working, then the code wasn't added to the right place. Edit that page and click the < > HTML icon.

Remove this line of code:

<img src=" style="width: 100%;max-width: 800px; height: auto; margin: auto; display: block;"/sy-misc/the-beginning/20171129054636-hiking.jpg" rel="max-width: 899px; max-height: 1199px; width: 552px; height: 736.205px; margin: auto; display: block;" style="max-width: 899px; max-height: 1199px; width: 552px; height: 736.205px; margin: auto; display: block;">

And replace it with this:

<img src="/sy-misc/the-beginning/20171129054636-hiking.jpg" style="max-width: 899px; width: 100%; height: auto; margin: auto; display: block;">

But I would suggest using the new page designer added in yesterdays update, will make it much easier and better to do that and will make it responsive.
https://www.picturespro.com/sytist-manual/site-design/advanced-page-design-page-templates/

Edited by

Awesome, I got the new update and that definitely fixed the problem. (the new advanced page designer is amazing by the way. great job. can't imagine how long that took for you to have ready). However! New problem... now when I go to the blog, I have to click on the individual blog post. Is there a way for the post to display entirely without having to click and open it? Also, if I decide I just want to show a preview of the blog post before clicking on it, is that possible as well??

Also- a totally separate question. I'm trying to use the wall designer, however it doesn't work completely with sub galleries. Does it only work on main galleries and not sub galleries?? When I go to the sub gallery, click on a photo, click on go to wall designer, all works so far. Then when I want to add more photos to the wall, it glitches. The right hand bar brings up the list of sub galleries, I click on the one I want but nothing happens. No photos appears. So I'm stuck only adding 1 photo to the wall designer.

Edited by

I will have to do some think on the blog posts and page designer. But you can make it show the full content of the post by going to:

Design -> Page Display & Content Listing Layouts.

Under listing layouts, click "Blog Layout - 1 Photo"

Remove the code from the HTML section and copy and paste this into there and save

<div class="preview">
<div class="headline"><h2><?php listingTitle($page);?></h2></div>
<div class="sub">
<span class="newsDate"><span class="theDate"><?php listingDate($page);?></span> <span class="theTime"><?php listingTime($page);?></span></span>
</div>
<div class="previewtext"><?php print $page['page_design'];?><br></div>
<div class="cssClear"></div>
</div>
<div> </div>

For the wall designer, the photos will appear under the list of the sub galleries. If you have a lot of sub galleries, you will have to scroll down to see them.

Edited by

Ok, the code fixed the problem of being able to view the whole post. And figured out the wall designer too.

However, still having a small formatting issue with the text alignment on mobile. I've double checked all my text boxes in the advanced page editor and they all say- text alignment left, fill content screen. The desktop version reflects that. But on the mobile version, all the text is center aligned! Why!!

Edited by

It automatically aligns some of the text center on mobile because of the classes used. Unfortunately I don't have an alternative for you at this time.

Edited by

What does that mean- the classes used??

Edited by

The css class which makes the elements adjust to screen resolution. I tried to come up with some additional CSS code to change it but no success. I'll have to make an option to have it center or left justified.

Edited by

Ok... because it's not some of the text. It's all of the text that's centered. Every other blog I visit on my mobile phone the text is large and justified on my screen to fill it....

Edited by

Nevermind, I figured out how to fix it. I changed the design element to a plain text area with editor and that fixed the formatting issue. I was using a different design element to put my text in.

New questions- I realized I changed my mind and want the listing layout to be a photo with title for you to click on and it open up the whole post. As opposed to the post displaying entirely from the get go.

I want this because when I link the blog post online, like on Facebook, I want there to be a thumbnail photo with the title of post. And I'm assuming that's not possible if I keep my blog posts already fully displayed??

See example of what it looks like now...

Basically, I want there to be a thumbnail photo for the specific post (not a photo for the blog as a whole) where there is currently no photo. I want it to say, The Spot, (which is the name of my blog) where it currently says Blog. And I don't want that tagline text which is for my website as a whole. Either no text, or preview text of the blog post?

Edited by

So I understand correctly, you basically want it like it was before with a title, 1 photo, then click it to view the whole blog post?

Edited by

Yes, exactly.

Edited by

Here is the default code for that. Replace it like my instructions above

<div class="preview">
<div class="headline"><h2><?php listingTitle($page);?></h2></div>
<div class="pc"><?php listingTotalPhotos($page);?></div>
<div class="sub">

<span class="newsDate"><span class="theDate"><?php listingDate($page);?></span> <span class="theTime"><?php listingTime($page);?></span></span>
<span class="category"><?php listingCategories($page);?></span>
</div>
<div class="previewtext"><?php listingPreviewText($page);?><br></div>
<div class="photos"><?php listingFirstPhoto($page);?></div>

<div class="cssClear"></div>
</div>
<div> </div>

Edited by

I tried it and nothing happened. Am I supposed to put that code onto the page for the individual post or the blog section as a whole? I tried putting it in both places... but nothing. Also, when I clicked on the html, there was no code there to delete and replace. It was just empty. Not sure what to do...

Edited by

Nothing meaning, the layout is still displaying the same as before.

Edited by

Design -> Page Display & Content Listing Layouts.

Under listing layouts, click "Blog Layout - 1 Photo"

Remove the code from the HTML section and copy and paste the code above there.

Edited by

Ok, fixed that thanks. However, preview text from my overall website is still showing as the preview text for the individual blog post. How do I remove that or edit it?? And I changed the title of my post, but it's not updating as seen in the photo I attached. Does it take time for it to update when I link it to someone?

Edited by

What you will need to do is when editing that blog post in the admin, click the metadata option and enter in the description you want to show there since it is currently not getting the preview text from the page designer text.

Edited by

Alright, well it's not working still. I entered in my own description in the metadata of the specific blog post and still nothing. It's still showing the old metadata from my website as a whole. I don't understand why this is happening. And it's not updating the title either... when I try to link the post it's still showing the exact same thing as the screenshot above from FB Messenger. 'Chiha Studios- The Spot- Blog- Chiha Studios' which is annoying.... The new title says- 'I went behind the curtain... literally'

Edited by

It's because Facebook has cached it since you previously shared it. You can have Facebook rescrape it here

https://developers.facebook.com/tools/debug/

Enter in the blog URL, click debug then rescrape.

I just did it so it should show the new information now.

Edited by

ok that's fixed. however, is there a way to clean up how many titles are showing? 'blog post title' 'blog title' 'website name' 'blog' 'website name' thats is VERY lengthy... how can I get rid of some of those? Perhaps so it just says- 'blog post title' 'blog title' 'website name' or anything simpler than what it shows now.

Edited by

When editing the post in the admin, under the title click custom meta title & page title options. If you enter in a title in the Meta Title, it will use that instead of the title that is built with the page name, category name, site title.

You will have to rescrape the page again after that.

Edited by

Yes, finally!! All is fixed. THANK YOU! for your continued support and seemingly always having the answer to any problem.

Edited by