I have a wrapper which is flex-column content justified and aligned at center.
And inside that wrapper there are images.
I over simplified the code and put somethings out, but issue is still going on.
In only Iphone 6 flex column wraps all items on one line.
Everywhere else Android,Windows,Mac and Iphone 5 and below this code works as it should.
You should try this in the real device, in simulator it works properly.
I tried in several ios versions and Iphone 6's.
This is the CodePen link http://codepen.io/anon/pen/amgVLN
I am sorry I didn't understand why CodePen links must follow with code?
Related
I have a hyperlink in the figure caption on my project and the link only appears to work when in mobile view / or small screen where the columns collapse. For some reason, this issue isn't replicated on JFiddle but it is when I test on a variety of browsers and devices.
I discovered that with my old code, the paragraph's area was overlapping the hyperlink's hoverable clicking space, and making it impossible to click until the image would stack above on smaller screen/mobile in the old code.
**Old HTML** JFiddle: https://jsfiddle.net/LybeppL3/7/
**So I tired a workaround**: see Current Code: https://jsfiddle.net/5c2sm9s1/1/
OR # PreemPrice.com
Specifically, I am trying now to break up a column for the picture on the right, the paragraphs of text to it's left, and when on mobile, that the picture stacks above the paragraphs of text and is centered.
However, my workaround does not look as nice/ not as responsive on mobile as my old code.
Specifically, I miss how in the "old" code, see JFiddle, it is really responsive in that the image keeps the same size, and once it's too big, it collapses over the text. In my current work-around, the photo shrinks uglily, and then stacks below instead of above the paragraphs.
Also, I miss how the image is fully centered at the top in mobile device in the old code.
I would appreciate help in getting this to work properly! Thanks!
So i've worked hard on this website and got to the point where its actually done, however its not working properly on firefox then it does on Chrome/ safari etc. On the contact page the text fields overlap the right column.
The home page doesnt stretch down far enough then in chrome and safari.
What do I do to fix this problem
The website: http://www.growinhealth.org.uk/contact.php
I am still learning HTML/CSS so please go easy.
Thanks
Different browsers handle widths of input fields differently, so I would add a class to the input tags and textarea tag that you want to fix the width of like so:
<input class='yourClass'></input>
<textarea class='yourClass'></textarea>
Then fix the width in the CSS
.yourClass{width:300px}
As for your homepage, it seems that in Firefox the div you call "content1" is too short, so I would put in the CSS
#content1{height:1400px}
I designed a page using Drupal 7 ( http://quaaoutlodge.com/drupal-7.14/ ). It looks just fine i(the way I meant it to) in Firefox anf Chrome but in Internet Explorer (testing 8.0 on WXP) it is all messed up. Now if you go onto a page with sub links, Golf e.g. ( http://quaaoutlodge.com/drupal-7.14/golf ) it looks all like expected in FF and Chrome but in IE, the #ContentWrapper div only starts on the bottom of my "secondnav" div. Why is this? How do I get the content up so that the top of content aligns wit the top of secondnav?
Okay, in the mean time I have figured out that if I add
width:600px;
to my
#contentWrapper{
style definition, the content div jumps up and its top is aligned with the top from the secondnav but this is not what I want. I would like to keep content at 800px and have them both next to each other, any hints?
Thanks!
Okay, fifured it out. An underlying div #pageBorder had a
margin-left:220px
and that would push my content onto the next line in IE while it worked fine in FF and Chrome. Well, it's fixed now...
http://quaaoutlodge.com/drupal-7.14/?q=contact
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com
I have a site where 3 pages have a row of images that can be viewed larger upon rollover. On 2 pages the alignment works fine, these have 6 images in the row. The third page which is not working properly has 5 images per row.
The pages with 6 images are aligning perfectly - the left-most image is on its own, floating left, the other 5 are in their own divs within a div (movers-row) and are spaced 20% apart. The code for this working page is here: http://jsfiddle.net/AvNJY/
So using the same logic I tried to get the row with only 5 images to align, again doing the same as above and setting the distance to 25%. This made the last image in the row jump below the others. I played around with the percentage and for some reason at 24.4% it looks as if it's aligning correctly in all browsers apart from Firefox, when viewed at 100%. However as soon as you enlarge the site in any browser, the last image jumps again below the others (in Firefox this happens automatically). I am wondering what I am doing wrong on this page as I've tried everything I can think of - and can't understand why the 25% isn't doing it. The code for this page is here: http://jsfiddle.net/9K74d/
I would really appreciate some help if anyone knows the answer. Thanks in advance!
Your example in jsfiddle, is not clear but try the following:
add overflow:auto for #studiomovers-row and remove the margin of this id.
It's probably a rounding error - browsers can be surprisingly poor at math and make unexpected rounding errors. Knock your % down to 24 or even 23 and see if that works. You can always try putting the images into a single div container, sized to the correct, expected size, and set overflow: hidden in case there is a pixel or two that runs over. That gives you a little margin of error and it's much better than having the layout break.