If you have a support question or comment, click the Post New Topic link below. Sytist Manual | Sytist Articles | Facebook Page.

Mobile View Of Blog Looks Terrible

 
Please log in or Create an account to post or reply to topics.
 
pierre chiha
84 posts
Thu Nov 30, 17
10:44 AM
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??
pierre chiha
84 posts
Thu Nov 30, 17
10:45 AM
See attached screenshot
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Fri Dec 01, 17
8:55 AM
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%"})
});
});
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Fri Dec 01, 17
2:08 PM
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.
pierre chiha
84 posts
Fri Dec 01, 17
2:10 PM
screenshot
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Mon Dec 04, 17
4:35 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Mon Dec 04, 17
10:29 AM
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.
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Tue Dec 05, 17
5:02 AM
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/

 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Tue Dec 05, 17
5:28 PM
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.
Tim - PicturesPro.com
9863 posts
admin
Wed Dec 06, 17
6:30 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Fri Dec 08, 17
10:10 AM
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!!
Tim - PicturesPro.com
9863 posts
admin
Sun Dec 10, 17
7:29 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Mon Dec 11, 17
1:26 PM
What does that mean- the classes used??
Tim - PicturesPro.com
9863 posts
admin
Wed Dec 13, 17
4:58 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Thu Dec 14, 17
9:52 AM
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....
pierre chiha
84 posts
Fri Dec 15, 17
11:17 AM
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?
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Mon Dec 18, 17
5:55 AM
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?
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Mon Dec 18, 17
11:22 AM
Yes, exactly.
Tim - PicturesPro.com
9863 posts
admin
Tue Dec 19, 17
11:25 AM
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>
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Tue Dec 19, 17
2:29 PM
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...
pierre chiha
84 posts
Tue Dec 19, 17
2:29 PM
Nothing meaning, the layout is still displaying the same as before.
Tim - PicturesPro.com
9863 posts
admin
Thu Dec 21, 17
3:35 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Fri Dec 22, 17
10:31 AM
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?
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Sat Dec 23, 17
7:07 AM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Thu Dec 28, 17
12:04 PM
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'
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Thu Dec 28, 17
12:18 PM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Thu Dec 28, 17
2:12 PM
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.
Attached Photos
Tim - PicturesPro.com
9863 posts
admin
Fri Dec 29, 17
12:04 PM
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.
 
 
 
 
 
Tim Grissett, DIA - PicturesPro.com || My Email Address: info@picturespro.com
pierre chiha
84 posts
Fri Dec 29, 17
2:04 PM
Yes, finally!! All is fixed. THANK YOU! for your continued support and seemingly always having the answer to any problem.
Loading more pages
Loading more pages

Sign up for email promotions.

Your information is safe with us and won't be shared.

Thank you for signing up!

 
©2003 - 2017 Grissett, LLC. All Rights Reserved.

By continuing to browse or by clicking Accept Cookies, you agree to the storing of cookies on your device necessary to provide you with the services available through our website.

    Accept   Privacy & Cookie Policy
Loading More Photos
Scroll To Top
Close Window
Loading
Close