PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

Lots of empty space showing up below a page in Affinity

(12 posts) (3 voices)

Started 9 years ago by VL Branko
Latest reply from Sinclair

VL Branko

offline
Member

I am just in the process of copy and pasting from old site to new pages from Affinity template and discovering strange bugs along the way so please be patient with me.

The following is a temporary page from the template. It has two images on the right side. It works perfectly no wasted space at the bottom

http://shyamasundaradasa.com/test2.html

In this second page which is a real page I have only one image in the right side but now there is a lot of space after the page ends. Any help solving this problem would be appreciated.

http://shyamasundaradasa.com/jyotish/temp/posing.html

Posted 9 years ago
Al Sparber

offline
PVII Team

It's the margin top on this rule:

#graphix2 {
width: 90%;
padding-top: 200px;
padding-right: 5%;
padding-bottom: 200px;
padding-left: 5%;
position: relative;
margin-top: 2500px;
text-align: center;
}

Posted 9 years ago
VL Branko

offline
Member

The Margin top rule was proposed as a solution to a different problem as seen on this thread,

http://www.pviiforums.com/topic.php?id=9720

Posted 9 years ago
VL Branko

offline
Member

It's the margin top on this rule:
#graphix2 { 
width: 90%; 
padding-top: 200px; 
padding-right: 5%; 
padding-bottom: 200px; 
padding-left: 5%; 
position: relative; 
margin-top: 2500px; 
text-align: center; 
}

As mentioned in previous post margin top was a suggested solution that works when there is two or more images because it also helped with the spacing of the images in smartphone view.

So I have replaced top margin rule with with "top: 2500px;" and that solves the problem in larger view but when I shift to smartphone view the image is gone. Previously it worked in smartphone view but not is desktop view, now it works it desktop view but not smartphone view.

This is starting to remind me of laying carpet, when you press down on a bulge it pops up somewhere else (-:

I am open to suggestions to fix it so that it works in both views.

Posted 9 years ago
Al Sparber

offline
PVII Team

I think the problem might be that you are applying print design techniques to web design. That's not a good thing. You can play with pushing down your images to try to bring them closer to the relevant text as much as you like. For smartphones, the columns are reflowed linearly so all you need to do is to undo he margin or top positions in your smartphone media query.

Posted 9 years ago
VL Branko

offline
Member

I think the problem might be that you are applying print design techniques to web design. That's not a good thing. You can play with pushing down your images to try to bring them closer to the relevant text as much as you like. For smartphones, the columns are reflowed linearly so all you need to do is to undo he margin or top positions in your smartphone media query.

It is strange because if I have two images I can position them where ever I want and they come out nicely in both desktop and smartphone view but if I eliminate one image then all hell breaks loose. I hate two find out what happens if I have 3 or 4 images(-:

Sinclair suggested the following changes:

__________
In the p7affinity-1_02 stylesheet, find this....

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {
padding-bottom: 0px;
}

And replace it with...

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {
padding-bottom: 0px;
}
#graphix2, #graphix3, #graphix4, #graphix5 #graphix6 {
margin-top: 20px !important;
}

________________

It helped with making both images appear completely and also shrink the large gap between them in desktop view to a small gap in smartphone view

The problem is that if I make the change in p7affinity-1_02 then it will apply to all the pages. Which will really mess things up as some pages will ha no images some 1 and others 2 or more and it seems that they will all require separate rules depending on the number of images. No images is no problem but 1 and 2 definitely are I have not 3 or more yet.

Could I instead move those media queries into the the head of the template so that they could be adjusted depending on how many images there are on the page? Or, could I leave them in p7affinity-1_02 and just add separate media queries to the head of the pages affected and assume that they will supersede the rules in the linked style sheet.

It is 2:30 AM where I am so time to go to bed. Look forward to your sage advice.

Posted 9 years ago
VL Branko

offline
Member

I tried adding this into the body of the affected page but didn't help:

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {
padding-bottom: 0px;
}

Really needing expert help from the pros.

Posted 9 years ago
Sinclair

offline
Member

To counteract the top: 2500px; on the #graphix2 the embed media query would be....

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
#graphix2 {top: 0px;}
}

HTH

Posted 9 years ago
VL Branko

offline
Member

Okay I will give that a try later today, got a busy schedule and out of town guests coming but do want to figure this out as it is hanging up all my other pages (100+) pages that need to be done.

Posted 9 years ago
VL Branko

offline
Member

By embedded I assume you mean the one in the head of the affected page and not p7affinity-1_02

Posted 9 years ago
VL Branko

offline
Member

That worked. The only problem is that I don't know why it worked. I usually am able to figure why things work for desktop CSS but have no real clue of how it works on phones. Can you steer me in the right direction regarding some good information tutorials manuals etc on this topic so that I can figure it out for myself?

Posted 9 years ago
Sinclair

offline
Member

There's some media query info in the affinity user guide........

http://www.projectseven.com/products/templates/pagepacks/dmm/affinity/index.htm

.....and loads of stuff via google, the media query you embedded in your page targets and acts on browsers/devices whose width is less than 700px and the rule within is targetting/changing the top position outlined in your regular #graphix2 rule. Similar media queries are to be found in the dmm and affinity stylesheets. I prefer to leave the media queries (not in this case where you've embedded to override on a page by page case) at the bottom of the stylesheets, just in case of css conflicts.

HTH

Posted 9 years ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.