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

PVII Forums » General Web Design

Media query help needed, please

(16 posts) (2 voices)

Started 10 months ago by wcamp
Latest reply from wcamp

wcamp

offline
Member

Hi, everyone:

I need to fine-tune the way that the image boxes and text boxes on my Home page resize responsively.

When viewed on smartphones, boxes with thumbnail images that have captions appear in differing heights. I'd like to keep the heights of each box uniform.

The text boxes also have irregular heights which make them difficult to read.

I've attempted to set definitive heights and minimum heights in my media queries but those declarations fail.

What can I add to make both types of containers be uniform in height and more reader-friendly?

https://www.warrencampdesign.com

Thanks, in advance, for your suggestions.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

Try adding this media query rule to your style sheet:

@media only screen and (min-width: 0px) and (max-width: 700px) {
.imageBox4 {
width: 48%;
min-height: 180px
}
}

This will set the width so that only 2 boxes per row display on the phone, allowing enough width to prevent the descriptions wrapping. The min-height is used to control the height of the text link boxes so that they all render with the same height, making them more readable.

Posted 10 months ago
wcamp

offline
Member

Gerry. I thank you very much for providing me with your suggested rule and your explanations of how different elements of it solve and prevent different problems.

All of the ".imageBox4" thumbnails and captions respond appropriately to a variety of screen widths. I've added margins to those containers and I believe they look fine. Thanks!

Regarding the four text-only containers (titled ".imageBox4_text"), I've created a similar media query rule with a different "min-width" declaration. They look okay, but, depending on selected screen widths, their placement becomes distorted. Can I assume that there's not much that can be done to prevent such response-mode distortions of those four text-only containers? If there's something I can add, delete, or modify to that rule, I'll gladly appreciate learning that from you.

Many thanks, Gerry!

Warren

Posted 10 months ago
Gerry

offline
PVII Team

There's really not much you can do with these floated text containers. The modern way to handle this is to do a 'real' grid, like our Flex Grid or Harmony system; they will allow the creation of equal height containers. The old fashioned way of handling this is to either assign a min-height to the imageBox4_text class (a min height that is tall enough to render all boxes equal height at the most narrow browser width, like 340px) or equalizing the content in each box, which most often does not work well.

Here's an approach using media query to extend the min-width at narrow browser width:

.imageBox4_text {
min-height: 240px;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
.imageBox4_text {
min-height: 340px;
}
}

That will equalize the height and make the boxes less erratic.

Posted 10 months ago
wcamp

offline
Member

Hello, again, Gerry.

I appreciate your suggesting the paired rule modifications. I entered them and modified your "min-height" values somewhat. I think that the two types of containers on my page now look good when viewed on smartphone screens. Are my "min-height" modifications acceptable in your opinion?

Your suggestion that I handle this situation by using a grid system such as Flex Grid reminded me that Al had encouraged me to buy Flex Grid Magic in 2016. I bought it then but I don't think I've used it yet. Do you imagine that it could be used effectively on this Home page of mine?

Thank you, my friend.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

Hi Warren,

The "min-height" values and media query break points is pretty much a subjective setting, it's whatever looks best with your intended layout goals. Your current values are fine, the key point is that they look great on phone resolutions and also look great in wider browsers.

The Flex Grid system would be ideal for the boxes, FGM was built to do this very thing using the modern flexbox spec.

Posted 10 months ago
wcamp

offline
Member

Gerry, hello:

Following your encouraging e-reply, I've created a new test page using Flex Grid Magic. On it, I've worked only with the text-only boxes; I've retained the original text-only boxes so you [and others] can see the differences in both sets; the upper "Assorted Theme Movies and Videos" grid is the FGM grid.
>>> https://www.warrencampdesign.com/indexFGM.html

Regarding standard formatting on non-mobile devices, I've set and restyled the four text-only boxes to my liking. However, I'm concerned now with assigning a line-height for each <a> tag's line of text. In the first of four boxes, I used only a standard , which causes severe line spacing. The other three boxes have an inadequate vertical spacing of the <a> tags. I tried to assign a line-height declaration for those FGM <a> tags but that made every line of text equally separate, which I don't like.

How can I make the FGM lines of text resemble the styling of the text in the four original boxes beneath the new FGM boxes?

The need to make such a revision is more evident when viewing the FGM elements in responsive mode, which I hope you'll examine.

Thank you, in advance, for your suggestions on making the text therein more reader-friendly.

Warren
_______

Posted 10 months ago
Gerry

offline
PVII Team

Hi Warren,

The spacing problem is two-fold:

1. You are using s to break to a new line after each <a> tag

2. If your want each link to be on one line the surround each with a tag, without the need for line-height or adjustments.

The quotes you are using to surround the links will also work better when in a tag, and you should use the char entity form for the quotes.

As an example, this from the first item in the second box:

"<a href="https://thebibleproject.com/videos/holy-spirit/" target="_blank" title="This is 'The Holy Spirit,' a 4-minute video produced by The Bible Project.">The Holy Spirit</a>" 

Should be changed to:

"<a href="https://thebibleproject.com/videos/holy-spirit/" target="_blank" title="This is 'The Holy Spirit,' a 4-minute video produced by The Bible Project.">The Holy Spirit</a>"

Do this for all of the items. Notice that I changed the quote to an entity as well. Each line item is now contained within a tag, which will automatically create the new line and white space. If you fee you need to further adjust the space between the link items then you simply adjust the top or bottom margin on the tag.

Now, to control the resizing we'll want to turn off the defualt "grow" factor in FGM. Add this style rule to your style sheet, the rule will keep the boxes to a strict 23% width-basis:

.p7FGM div.fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}

Lastly, to switch toa two column display for phones add this media query style rule to your style sheet:

@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7FGM .fgm-section {
flex-basis: 46% !important;
font-size: 0.82em !important;
}
}

I also included the font-size adjustment your had in the original.

That should get your pretty close to the original version, but with more control.

Posted 10 months ago
wcamp

offline
Member

Many thanks to you, Gerry! Great suggestions. I've enclosed the <a> tags within tags and have set margin values for those s.

On this TEST page, when viewed on larger devices, the new FGM collection of four text containers looks very similar to my four non-FGM containers beneath them.

On smartphones, Flex Grid Magic's improvement to responsiveness is most notable! Big improvement. [To make the four containers switch to two per line, on smartphones, I needed to reduce the "flex-basis:" value that you'd suggested, from 46% to 44%. Is that an acceptable modification?

Now that I believe that the text-only containers respond appropriately to all device sizes —thanks to FGM — I'll work this week on doing similarly on the many containers on this page that include a thumbnail and a bottom caption. I won't start until I hear from you that what I'd entered so far is acceptable.

Thanks, in advance, Gerry.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

No problem at all with the change to 44%. What you've done sop far looks good, I'm not quite sure that you want the font size that small for the phone presentation, but that a matter of design goal.

Posted 9 months ago
wcamp

offline
Member

Great to find your encouraging e-reply, Gerry.

Regarding the font size, I agree that it should be enlarged. I was waiting to see if you had a word of advice on how to modify the two media query items that I'd put on that TEST page's <head>. Both the "fgm-section" and "fgm-content" rules include an active "font-size" declaration. Do I need only one "fgm" rule?

Before I increase one or both declarations' values, I'd like to hear back from you on what to change regarding those two media query entries.

Thanks, so much.

Warren

Posted 9 months ago
Gerry

offline
PVII Team

You already have a font-size reduction for all tags in your styles.css style sheet. Since these links are now in tag they will reduce:

.main-content p {
font-size: 0.91em;
}

So the font-size rule you have added i n the <head> is reducing this further, I would remove:

font-size: 77%;

from the rue you have in the <head> section.

Posted 9 months ago
wcamp

offline
Member

Excellent!

I've deleted that "font-size: 77%" declaration from the first media query rule, shown below. I then saw the need to increase the "font-size" value in the second media query rule from "0.82em" to "0.90em," which makes the FGM-specific text look like the original text beneath it.

/* 1 Column for Narrow Browser Windows and Smartphones in both orientations */
@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7FGM .fgm-content {
font-weight: bold;
padding: 0;
line-height: 1.69em;
}
.p7FGM .fgm-section { /* to switch to a two-column display for phones */
flex-basis: 44% !important;
font-size: 0.90em !important;
}
}

I'll now begin to work on applying new FGM instances to the combination thumb-and-text caption containers.

If you see a need for me to further modify either media query, please don't hesitate to make that suggestion.

With thanks and appreciation,

Warren

Posted 9 months ago
wcamp

offline
Member

Greetings, Gerry:

I've created new FGM instances for all of my page's containers. They've been styled and I like how they look. The new FGM containers are above the original containers for comparison.

The containers function very well on smartphones, thanks to you and PVII's Flex Grid Magic. I'm glad that you suggested that I utilize it.

Would you please check and verify my page's markup and my external style sheets' entries? Much appreciated!

One closing question: When I view this page on smartphones, there's a lot of white space between the header and the top of ".main-content." My attempts to minimize the empty spaces have failed. What media query might I use to bring the main content section closer to the header?

https://www.warrencampdesign.com/indexFGM.html

Thanks, pal!

Warren

Posted 9 months ago
Gerry

offline
PVII Team

The space at the top is caused by the height you have set for the header. In your styles.css style sheet, line 44:

header {
height: 150px !important;
width: auto !important;
max-width: 100%;
margin-bottom: 8px;
background: url(../images/headright.png) right no-repeat;
}

Remove the height rule, I don't see any reason to use height at all and it forces the header to be taller than it needs to be on phones.

The FGM implementation looks pretty good, great job!

Posted 9 months ago
wcamp

offline
Member

Your advisory, Gerry, to delete that "height: 150px !important;" declaration did the trick. Thanks yo ver much! I appreciate your knowhow and continued support.

Thanks, too, for inspecting how I utilized Flex Grid Magic on my Home page and for e-confirming that it "looks pretty good."

I agree that it looks and works pretty good, thanks to you, my friend.

Warren
_______

Posted 9 months ago

PVII Forums » General Web Design

RSS feed for this topic

Reply

You must log in to post.