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
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
Thu Nov 30, 17
10:45 AM
See attached screenshot
Attached Photos
Tim - PicturesPro.com
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
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
Fri Dec 01, 17
2:10 PM
screenshot
Attached Photos
Tim - PicturesPro.com
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
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
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
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
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
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
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
Mon Dec 11, 17
1:26 PM
What does that mean- the classes used??
Tim - PicturesPro.com
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
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....
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.
Loading More Photos
Scroll To Top
Close Window
Loading
Close