@media help

Allen

I have an html box set to a max width. As the browser is shrunk I want to hide the right most div,
thumb image, so when it pops down it's hidden on pc's and handhelds.

I've tried this in "Just this gallery" CSS but it doesn't work on PC. (not unveiled)
Obvious I have no idea what I'm doing. I've assigned classes to each div.

@media screen and (max-width: 1040px) {
  .rightThumb {
    display: none;
  }
}

[U]and this[/U]

@media screen and (min-width: 1040px) {
  .rightThumb {
    display: none;
  }
}

If I can get this to work I'll next work on the center two thumbs, one div.
Any help would be appreciated, thanks.

leftquark

I've got a number of examples on my customizations page here http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

You want to use the "max-width" when you're trying to hide things when they get too narrow (like smartphones, tablets, small monitor windows).
You want to use the "min-width" when you're trying to do things for large windows (it means anything larger than the min-width, apply these settings...):

For example, I turn off the social links and search form on my website for small screens

/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
  .sm-search-form, .sm-page-widget-social-links { display: none; }
}

Allen

leftquark wrote: »

I've got a number of examples on my customizations page here http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

You want to use the "max-width" when you're trying to hide things when they get too narrow (like smartphones, tablets, small monitor windows).
You want to use the "min-width" when you're trying to do things for large windows (it means anything larger than the min-width, apply these settings...):

For example, I turn off the social links and search form on my website for small screens

/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
  .sm-search-form, .sm-page-widget-social-links { display: none; }
}

I tried this and it doesn't work in my browser, Firefox. (logged in not unveiled)

@media only screen and (max-width: 1040px) {
  .rightThumb {
    display: none !important;
   }
}

<div class="rightThumb" style="float:right; margin-bottom: 10px;">
<img src="/photos/99995656-Ti.jpg" alt="image" />
</div>

Any ideas?
thanks

Allen

I just went into edit and it's removing the class name. class="rightThumb"

  <div style="float:right;margin-bottom: 10px;">
<img src="/photos/99995656-Ti.jpg" alt="image" />
</div>

This works when using span instead.

<div style="float:right;margin-bottom: 10px;">
<span class="rightThumb"><img src="/photos/99995656-Ti.jpg" alt="image" /></span>
</div>

leftquark

You beat me to it .. I was going to ask how you define the DIV for rightThumb. Code looks good. Sure you made the screen small enough to hide it?

Allen

leftquark wrote: »

You beat me to it .. I was going to ask how you define the DIV for rightThumb. Code looks good. Sure you made the screen small enough to hide it?

This is what I ended up with, removes images all the way down to narrowest browser size.

@media only screen and (max-width: 1060px){.rightThumb{display:none}}

@media only screen and (max-width: 970px){.centerThumbs{display:none}}

@media only screen and (max-width: 410px){.leftThumb{display:none}}

Looks like Smug will not accept assigning class id's to div's in html boxes but does for spans.
<div [strike]class="rightThumb"[/strike]> Auto removes red when going back into edit.
<span class="rightThumb">

leftquark

Did you try doing

<div class="

in an HTML block? I use div classes all over (example: my prints page) and it works fine.

Allen

leftquark wrote: »

Did you try doing

<div class="

in an HTML block? I use div classes all over (example: my prints page) and it works fine.

In my last post shows what I used. Like this. The style remained showing.
<div class="rightThumb" style="float:right;margin-bottom: 10px;">

But when going back in to edit the html box the class part disappeared on the div's.

I'll test again, maybe I made some error.

leftquark

Allen wrote: »

In my last post shows what I used. Like this. The style remained showing.
<div class="rightThumb" style="float:right;margin-bottom: 10px;">

But when going back in to edit the html box the class part disappeared on the div's.

I'll test again, maybe I made some error.

You know I've had some issues in the past ... I've had HTML code that worked but as soon as I updated it, it broke because smugmug stopped allowing a certain HTML tag.

If span's work, I guess you could use that, however, I would suggest you submit a support ticket and notify the SM Support Heroes that they've accidently added "DIV CLASS=" identifiers to the banned HTML list, and it shouldn't be. That's going to break a LOT of peoples code if they don't allow you to specify div class names in the HTML block.

Also, did you type "div id='rightThumb'" and then use CSS code "#rightThumb { display: none; }"

Maybe ID's work but CLASS doesn't?

Allen

leftquark wrote: »

Did you try doing

<div class="

in an HTML block? I use div classes all over (example: my prints page) and it works fine.

Ok, now this works. <img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" > Removed spans. Must of been some kind of error.

<div class="leftThumb noBorder" style="float:left;">
<div class="centerThumbs" style="float:left; margin: 0 20px;">
<div class="rightThumb" style="float:right;margin-bottom: 10px;">

leftquark

Allen wrote: »

Ok, now this works. <img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" > Removed spans. Must of been some kind of error.

<div class="leftThumb noBorder" style="float:left;">
<div class="centerThumbs" style="float:left; margin: 0 20px;">
<div class="rightThumb" style="float:right;margin-bottom: 10px;">

Hah, ok, good, glad to see class names aren't banned

Allen

The big issue I had was placing the five div's, 3 image, 2 text across the page and getting them
to expand out full width and keeping a variable spread. Gaps between each adjusting equally.

I had used a table on legacy.
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-H-Z/3760688_zxG6rs
Which now looks terrible working on NewSmug.

leftquark

Allen wrote: »

The big issue I had was placing the five div's, 3 image, 2 text across the page and getting them
to expand out full width and keeping a variable spread. Gaps between each adjusting equally.

I had used a table on legacy.
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-H-Z/3760688_zxG6rs
Which now looks terrible working on NewSmug.

it might be a little confusing but SmugMug uses "FlexBox" to create boxes that adjust accordingly. You might be able to take advantage, although there's prob. a learning curve: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Allen

leftquark wrote: »

it might be a little confusing but SmugMug uses "FlexBox" to create boxes that adjust accordingly. You might be able to take advantage, although there's prob. a learning curve: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Am I close? five div's, 3 image, 2 text across the page

<div class="myFlexbox" style="max-width: 90%">
   <div class="box1 noBorder" style="width: 100px; text-align:center;">.thumb.</div>
   <div class="box2" style="width: 210px; text-align:center;">.text.</div>
   <div class="box3" style="width: 210px; text-align:center;">.2 thumbs.</div>
   <div class="box4" style="width: 310px; text-align:center;">.text.</div>
   <div class="box5" style="width: 100px; text-align:center;">.thumb.</div>
</div> <!-- end myFlexbox -->
<div style="max-width:90%; text-align:justify;>.text.</div>


.myFlexbox {
  display: flex;
  flex-direction: row nowrap;
  justify-content: space-between;
}

Allen

Allen wrote: »

Am I close? five div's, 3 image, 2 text across the page

<div class="myFlexbox" style="max-width: 90%">
   <div class="box1 noBorder" style="width: 100px; text-align:center;">.thumb.</div>
   <div class="box2" style="width: 210px; text-align:center;">.text.</div>
   <div class="box3" style="width: 210px; text-align:center;">.2 thumbs.</div>
   <div class="box4" style="width: 310px; text-align:center;">.text.</div>
   <div class="box5" style="width: 100px; text-align:center;">.thumb.</div>
</div> <!-- end myFlexbox -->
<div style="max-width:90%; text-align:justify;>.text.</div>


.myFlexbox {
  display: flex;
  flex-direction: row nowrap;
  justify-content: space-between;
}

Works like a charm, even the disappearing thumbs on browser shrink.

had to remove <!-- end myFlexbox -->

ChancyRat

Regarding "flexbox", I take it that wherever I have a table, I should be using this code? Meaning, re-write my current HTML/CSS code?
Please share when/where one should use flexbox code?
And on the site for the code, I see " W3C Candidate Recommandation" [sic]. Does this mean that some viewers will not see what I want them to see if they're system can't handle the CSS?
Thanks.

leftquark

Allen wrote: »

Works like a charm, even the disappearing thumbs on browser shrink.

Wahoo! Glad it worked and was pretty easy!

ChancyRat wrote: »

Regarding "flexbox", I take it that wherever I have a table, I should be using this code? Meaning, re-write my current HTML/CSS code?
Please share when/where one should use flexbox code?

I think if you've already written a bunch of HTML/CSS you might as well leave things how they are, however, going forward you could try to use the FlexBox code. It may make things easier to format but would be a waste of time to change something that already works

ChancyRat wrote: »

And on the site for the code, I see " W3C Candidate Recommandation" [sic]. Does this mean that some viewers will not see what I want them to see if they're system can't handle the CSS?

Most likely you'll be fine ... I think certain functionality (like the ability to make boxes format properly) works across all browsers. However, certain advanced features may not work. I know that SmugMug used some code to reverse the order in which div's were displayed and FireFox didn't support it. The swapping of photo and thumbnail in SM layout was an example of this: FireFox had it's own code to do what I wanted (swap them).

Allen

I noticed that it looks like Smug removes tables that were in legacy gallery descriptions from NewSmug. One
of the reasons I switched to div's then flex.

I just checked the sister gallery (A-G) of the one I'm working on and in legacy it has html tags and tables.
Looking at the description in NewSmug the html tags are gone and also any reference to tables. But it still
displays formatted?

It might be a good idea to split off these posts where FlexBox is discussed and create a new thread for
FlexBox discussion. Any thoughts? Most don't have a clue this exists and a stand-alone thread would
bring it up front.

Allen

Got the FLEX to work, you can check it out here. (unveiled now )
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-md2Kdvp

Watch the thumbs disappear as the browser is narrowed. Not perfect but it seems to work.