Media Query & Flexbox Issue

[Alanna 🥀🖤]

Jan 27, 2017 17:21:31 GMT -8 elli said:

Jan 27, 2017 17:07:03 GMT -8 @khristian said:

No.

Jan 20, 2017 14:57:50 GMT -8 @khristian said:

Chrome. So far everything works on all browsers without vendor prefixes. JK, I lied. BUT- all the other templates work find on my mobile, this is the only one that doesn't.

I'm confused.

I did not say that I was using Chrome on my mobile specifically.

To clarify:
- I use Chrome on my laptop.
- I use Safari on my iPhone as it is default.
- ALL templates using similar coding and layout work on both EXCEPT for one template (the one linked).

[elli]

@khristian Haha, that's what I was asking. iOS Safari or iOS Chrome. Sorry, I guess I should have prefaced Chrome with iOS to be clear.

I would recommend you give the vendor prefixes a try, but only on the template CSS. If not, I'll rebuild it in codepen and test to see if it's a property missing or out of place.

[Alanna 🥀🖤]

The vendor prefixes did not work. It just stretched the template making it scroll horizontally.

[Alanna 🥀🖤]

Still need help with this!

[Alanna 🥀🖤]

Chris?

[Chris]

Please fill in the gaps here since I am looking at this thing blind @khristian , I am seeing two templates being employed in the linked examples (.template4 and .template5) and the CSS defined for the respective templates vary particularly in regards to the treatment of images contained in the .right div but also in the inclusion of "flex-wrap" in .template5 (the one that works). A side by side comparison of the two CSS might help identify the differences:

.template5 {

display: flex;
}

.template5 .left {
text-align: justify;
flex: 1 1;
}

.template5 .left p {
background-color: #f9f9f9;
padding: 20px;
box-sizing: border-box;
}

.template5 .right {
padding: 0 0 0 20px;
width: 220px;
box-sizing: border-box;
}








.template5 .right p {
margin-top: 10px;
font-size: 10px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
}

.template5 .right span {
float: right;
font-weight: normal;
}

.template5 .right>div {
margin-top: 10px;
background-color: #f6f6f6;
padding: 10px;
box-sizing: border-box;
font-size: 10px;
text-align: justify;
}

.template5 .right>div img {
padding: 0;
border: 0;

}

@media all and (max-width: 800px) {
.template5 {
flex-wrap:wrap;
}

.template5 .left,.template5 .right {
width: 100% !important;
}

.template5 .right {
margin-top: 20px;
padding: 0 !important;
}




}

.template4 {

display: flex;
}

.template4 .left {
text-align: justify;
flex: 1 1;
}

.template4 .left p {
background-color: #f9f9f9;
padding: 20px;
box-sizing: border-box;
}

.template4 .right {
padding: 0 0 0 20px;
width: 220px;
box-sizing: border-box;
}


.template4 .right img {
padding: 10px;
border: 1px solid #668899;
box-sizing: border-box;
}

.template4 .right p {
margin-top: 10px;
font-size: 10px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
}

.template4 .right span {
float: right;
font-weight: normal;
}

.template4 .right>div {
margin-top: 10px;
background-color: #f6f6f6;
padding: 10px;
box-sizing: border-box;
font-size: 10px;
text-align: justify;
}

.template4 .right>div img {
padding: 0;
border: 0;
width: initial!important;
}

@media all and (max-width: 800px) {




.template4 .left,.template4 .right {
width:100% !important;
}

.template4 .right {
margin-top: 20px;
padding: 0 !important;
}

.template4 .right img {
width: 100%;
}
}

[Alanna 🥀🖤]

The CSS is more or less identical.

[Chris]

May 13, 2017 1:23:48 GMT -8 @khristian said:

The CSS is more or less identical.

Not quite identical, if I add the flex-wrap (the one I highlighted in limegreen) to template4 then it wraps in the chrome emulator  just fine but does not wrap without it so perhaps try to add anyway (humor me) ...

[Alanna 🥀🖤]

Template 5 also does not work it turns out however. So template 4 and 5 are the ones that are not working.

[Chris]

Well I'm off to work so will have to revisit this later but my observations showed template5 working and template4 not so working and the comparison between the two sheets followed by the suggested modification to template4 got it working for me...

[Alanna 🥀🖤]

May 13, 2017 2:06:54 GMT -8 Chris said:

Well I'm off to work so will have to revisit this later but my observations showed template5 working and template4 not so working and the comparison between the two sheets followed by the suggested modification to template4 got it working for me...

Odd. Both template 4 and 5 are not working on my mobile. Note that they are both working perfectly fine on desktop. I only have issues on mobile.

Also I downloaded Chrome on my iPhone just to see if it would work on there- but no. Still the same issue. Templates 4 and 5 do not work on either Safari or Chrome on mobile but perfectly fine on desktop. Hrm, had to double check on Safari on desktop and it looks like I have having the same issue there as I am on mobile...

I have also noticed an issue with flex-wrap on another theme I am doing on mobile/safari. I would guess it's something specifically involving flex-wrap? I have tried multiple vendor prefixes though and all I tried either didn't change anything or broke things more.

[Alanna 🥀🖤]

I added the vendor prefixes provided by Autoprefixer, and not much changed:
Google Chrome on Desktop
Google Chrome on Mobile 1 & 2

On Safari mobile and desktop- neither templates work while on Google Chrome desktop, one without an image does but neither on mobile.   I have NO idea why this is doing this and it's quite frustrating because I can't fix issues on a commission I'm doing for this same error.

[Peter]

@khristian,

I tested in Firefox and Chrome for desktop and mobile (responsive mobile agents), and it works fine.

I don't have much time on my hands to really jump in and help debug the issue. Just for the sake of being on the same page as us (you are logged in, we aren't), can you test in private / incognito mode.

[Alanna 🥀🖤]

Private Safari Browser (not logged in)
1, 2

I am actually checking ON my mobile. Based on your screenshots, you are using a website that simulates a mobile- not actually on a mobile device which does make a difference. I used to use those to test but because they are different from what I actually see on my phone, I stopped using them.

[Alanna 🥀🖤]

Aha! I fixed the templates! I added flex: 100%; as well as width: 100%; (which I already had) and it worked!

However, I can't figure out my other issues on a commission I'm doing. If I can have help with this too it would be most appreciated! The main issue with the commission is that I have containers that hold multiple containers that are given the flex: 1 1; and flex-wrap and work perfectly fine on desktop Chrome but on Safari desktop and both Chrome and Safari mobile the containers refuse to wrap but instead stay in a straight line and run off the page.
trinityblair-test.boards.net/

Examples of this are:
- the navigation links in the welcome table: clicky
- the orange and dark information boxes in profiles: clicky
- the tabs on the fractions page: clicky