[css-d] Centering a group of floated thumbnails (which are in a responsive width design)
Hello all, haven't been on css-discuss in a while. but had something stump me today. I had a group of floated thumbnails. their parent, .progress-gallery-wrapper, is just set to 100% width like so: http://jsfiddle.net/RV7pj/ But when you look at the first group of images, they are not centered, especially if you resize the screen so there is 1 or 2 images per row. I tried to use an inline-block trick on the div that holds the thumbnails, and then use text-align:center to center the div that holds the thumbnails. Tried other tricks like display:table-cell, 50% positioning tricks to no avail. The website is going to be responsive (simply simulating that with the width of the page being 100% so can resize that frame in jsfiddle to test)... so that group of X images per row could go down to 1 image per row on mobile. Anyway to get really nice centering no matter the size of the page? Seems like with my current inline-block centering code, it only centers if there is 1 row of images like in the 'After' images. Thanks for any advice if possible, -Ari __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a group of floated thumbnails (which are in a responsive width design)
Put display: block and text-align: center back on .progress-gallery-images and display: inline-block back on .progress-gallery-image (and removed their float: left), and it just worked! http://jsfiddle.net/barney/Uuw29/ Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 13 March 2014 06:48, Arian armyofda12mnk...@gmail.com wrote: Hello all, haven't been on css-discuss in a while. but had something stump me today. I had a group of floated thumbnails. their parent, .progress-gallery-wrapper, is just set to 100% width like so: http://jsfiddle.net/RV7pj/ But when you look at the first group of images, they are not centered, especially if you resize the screen so there is 1 or 2 images per row. I tried to use an inline-block trick on the div that holds the thumbnails, and then use text-align:center to center the div that holds the thumbnails. Tried other tricks like display:table-cell, 50% positioning tricks to no avail. The website is going to be responsive (simply simulating that with the width of the page being 100% so can resize that frame in jsfiddle to test)... so that group of X images per row could go down to 1 image per row on mobile. Anyway to get really nice centering no matter the size of the page? Seems like with my current inline-block centering code, it only centers if there is 1 row of images like in the 'After' images. Thanks for any advice if possible, -Ari __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a group of floated thumbnails (which are in a responsive width design)
Wow, Thanks Barney for the late night help :)! Yes, that looked like it worked very well :). __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with menu bar
Hi, I have this demo setup here http://jsfiddle.net/dTsrY/ and i need help with a few issues that i am having. I am using bootstrap 3.0 and when the page gets smaller the menu moves outside of the bottom shadow image border and i would like for it to stay inside the border. Also, the width of the submenu is longer than the hover for the items in the submenu, so when you hover a submenu item there is extra white space to the right. Thanks in advance for any help. -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with menu bar
On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com wrote: Hi, I have this demo setup here http://jsfiddle.net/dTsrY/ and i need help with a few issues that i am having. I am using bootstrap 3.0 and when the page gets smaller the menu moves outside of the bottom shadow image border and i would like for it to stay inside the border. Inside header, div class=col-md-9 col-sm-12 at small widths is being told to be 12 cols wide, which is too wide next to your logo - which is also being told to be 12col wide - so it drops down Also, the width of the submenu is longer than the hover for the items in the submenu, so when you hover a submenu item there is extra white space to the right. ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and also is getting padding right (line 422). I guess that's too wide for the parent. Thanks in advance for any help. -- Hope this helps. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with menu bar
Inside header, div class=col-md-9 col-sm-12 at small widths is being told to be 12 cols wide, which is too wide next to your logo - which is also being told to be 12col wide - so it drops down i fixed the submenu issue by removing the width:170px; http://jsfiddle.net/dTsrY/5/ i dont mind that the menu drops down..i just want the menu to still be above the shadow border (div class=row top-shadow/div) On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com wrote: Hi, I have this demo setup here http://jsfiddle.net/dTsrY/ and i need help with a few issues that i am having. I am using bootstrap 3.0 and when the page gets smaller the menu moves outside of the bottom shadow image border and i would like for it to stay inside the border. Inside header, div class=col-md-9 col-sm-12 at small widths is being told to be 12 cols wide, which is too wide next to your logo - which is also being told to be 12col wide - so it drops down Also, the width of the submenu is longer than the hover for the items in the submenu, so when you hover a submenu item there is extra white space to the right. ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and also is getting padding right (line 422). I guess that's too wide for the parent. Thanks in advance for any help. -- Hope this helps. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
You don't explain what you mean with same size -- in a valid HTML5
document I wouldn't get that issue you claim -- nor do you post online code
as HTML/CSS. It's pointless to debate what you think happened with a
picture. Make it happen in all of our browsers too -- by posting validated
code that illustrates your problem -- or talk about a specific known issue.
I did post (almost) valid code in my first message, but here it goes again.
Seeking validation I added a forgotten pair of forgotten TR tags, as well
as !doctype, charset information and a title:
!doctype html
meta charset=utf-8
titleInconsistent font size?/title
style
table { border-spacing: 0 }
td,p { font-size: medium }
/style
pLorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
cumque, pariatur, deserunt id impedit delectus at porro eum quaerat
officia atque eligendi tempora corporis necessitatibus quos minima
eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde
consectetur!/p
tabletrtdLorem ipsum dolor sit./td/tr/table
I also posted a picture, http://i.imgur.com/WtmgiXQ.png, that shows what
happens using three main browsers (Chrome, Firefox and Opera) in the
leading mobile OS (Android)... I would test it with an iPhone if I had one,
but I think this is far from a niche question. I can't make it happen in
all browsers since it doesn't affect desktop browsers, the Android 2.3
stock browser, etc. For convenience, here is a URL with such code:
http://81.4.104.136/fonts.html . I don't know what else to do in order to
present my question.
Thanks for replying.
Cheers,
Ezequiel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
mar 13 2014 Ezequiel Garzón garzon.luc...@gmail.com: http://81.4.104.136/fonts.html I don’t see your issue in Android nor in IOS. Anyone else? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
I don't see your issue in Android nor in IOS. Anyone else? Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. [1] https://lists.webkit.org/pipermail/webkit-dev/2012-May/020819.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
I see the problem on my new android galaxy tab3. Yolanda __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Re: Do modern mobile browsers deliberately ignore font size?
I do see your problem on android, when I turn my galaxy tab3 on its side, the last sentence becomes a very small letter, while the first part remains the same as before, and they should be the same, right? Yolanda __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with menu bar
Sent from my iPhone On Mar 13, 2014, at 4:53 PM, Brian Jones bdotjo...@gmail.com wrote: Inside header, div class=col-md-9 col-sm-12 at small widths is being told to be 12 cols wide, which is too wide next to your logo - which is also being told to be 12col wide - so it drops down i fixed the submenu issue by removing the width:170px; http://jsfiddle.net/dTsrY/5/ i dont mind that the menu drops down..i just want the menu to still be above the shadow border (div class=row top-shadow/div) Can't look right now. Is there an explicit hight set on that div? On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com wrote: Hi, I have this demo setup here http://jsfiddle.net/dTsrY/ and i need help with a few issues that i am having. I am using bootstrap 3.0 and when the page gets smaller the menu moves outside of the bottom shadow image border and i would like for it to stay inside the border. Inside header, div class=col-md-9 col-sm-12 at small widths is being told to be 12 cols wide, which is too wide next to your logo - which is also being told to be 12col wide - so it drops down Also, the width of the submenu is longer than the hover for the items in the submenu, so when you hover a submenu item there is extra white space to the right. ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and also is getting padding right (line 422). I guess that's too wide for the parent. Thanks in advance for any help. -- Hope this helps. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
Sent from my iPhone
On Mar 13, 2014, at 5:32 PM, Ezequiel Garzón garzon.luc...@gmail.com wrote:
You don't explain what you mean with same size -- in a valid HTML5
document I wouldn't get that issue you claim -- nor do you post online code
as HTML/CSS. It's pointless to debate what you think happened with a
picture. Make it happen in all of our browsers too -- by posting validated
code that illustrates your problem -- or talk about a specific known issue.
I did post (almost) valid code in my first message, but here it goes again.
Seeking validation I added a forgotten pair of forgotten TR tags, as well
as !doctype, charset information and a title:
!doctype html
meta charset=utf-8
titleInconsistent font size?/title
style
table { border-spacing: 0 }
td,p { font-size: medium }
/style
pLorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,
cumque, pariatur, deserunt id impedit delectus at porro eum quaerat
officia atque eligendi tempora corporis necessitatibus quos minima
eaque dolorem eius quia nisi velit hic consequatur ea quis earum unde
consectetur!/p
tabletrtdLorem ipsum dolor sit./td/tr/table
I also posted a picture, http://i.imgur.com/WtmgiXQ.png, that shows what
happens using three main browsers (Chrome, Firefox and Opera) in the
leading mobile OS (Android)... I would test it with an iPhone if I had one,
but I think this is far from a niche question. I can't make it happen in
all browsers since it doesn't affect desktop browsers, the Android 2.3
stock browser, etc. For convenience, here is a URL with such code:
http://81.4.104.136/fonts.html . I don't know what else to do in order to
present my question.
At the 81.4 address, all the text is microscopic on my iPhone iOS 7.1 Safari.
Thanks for replying.
Cheers,
Ezequiel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On a Motorola G phone with Android Kitkat the p text is quite large and the table text is tiny. On an iPhone 4 all the text is the same size, and tiny. Peter El 13/03/2014, a las 23:31, Ezequiel Garzón escribió: Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Do modern mobile browsers deliberately ignore font size?
On Sunday 2014-03-09 21:52 +0100, Ezequiel Garzón wrote: Is this font boosting/inflation? It sounds like it is. It sounds like the thread has already uncovered some links about the Chromium implementation. There's some information about Gecko's implementation here: http://www.jwir3.com/blog/2012/07/30/font-inflation-fennec-and-you/ and the start of a spec draft for the behavior here: http://dev.w3.org/csswg/css-size-adjust/ -David -- 턞 L. David Baron http://dbaron.org/ 턂 턢 Mozilla https://www.mozilla.org/ 턂 Before I built a wall I'd ask to know What I was walling in or walling out, And to whom I was like to give offense. - Robert Frost, Mending Wall (1914) signature.asc Description: Digital signature __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
