Well, another embarrassing error. I just moved the code for the boxes to the media query for 48em. That made everything work on my iPad too.
Thank you coothead for all the help....
judgedredd
CodingForum Regular
Last Activity: Sep 17, 2021, 09:38 PM
Joined: Sep 6, 2010
Location: St Catharines, Ontario, Canada
-
-
What is interesting is that the responsive mode tool in Firefox 90 gives the exact same result - on iPhones the order of the boxes is correct but on an iPad it shows that it doesn't, which is what I am seeing on mine, which is kinda weird as they are both Apple products.Last edited by judgedredd; Sep 17, 2021, 06:13 PM.Leave a comment:
-
That worked. Thank you. But on my iPad (Safari) it does not work. I know there is a workaround so how do I implement it?Leave a comment:
-
Sorry coothead , I didn't see your posts that were posted before I posted my response above....Leave a comment:
-
Now I have to figure out what to do with the divs in responsive mode as they are out of order. I tried the following:
...HTML Code:media (max-width:42em) { .container div { display: flex; flex-direction: column; } .container div :nth-child(1) { order: 1; }Last edited by judgedredd; Sep 17, 2021, 04:56 PM.Leave a comment:
-
Changed the container paragraph width to 100% and the margin to 0.5em. Everything now looks perfect. Thank you so much for the help.Leave a comment:
-
Nearly there... I put back your original code and the white space under the first and third images has disappeared. The only thing left to do is to get the image on the second row to show. Oops... another error from me. I didn't go back enough in the undo. Now everything is back to your original code...Last edited by judgedredd; Sep 17, 2021, 04:12 PM.Leave a comment:
-
Ok. That got the page code doing what I expected. Thank you. I must admit that such a basic error caused me to cringe - you must think I am a complete noob. Now, the page is still not quite right with the middle row image missing and some white space under the other images. So do I revert back to what...Leave a comment:
-
coothead I found that your code pen edit code is different to what you posted above. Here is what is in that codepen:
...HTML Code:body { font: normal 1em / 1.5em sans-serif; } #container { display: flex; flex-direction: row; flex-wrap: wrap; }Leave a comment:
-
That is much appreciated coothead , but leaves me very perplexed. I can see that your code works exactly as I thought it would but for some reason breaks within my page when I put the exact same code into it. There is obviously a conflict somewhere which is causing things to not render correctly....Leave a comment:
-
@coothead that code you provided doesn't work. The images go right across the page and the background of the text areas stay white. Here is a screenshot:
Not sure what to do so will see if there are any conflicting div elements....Leave a comment:
-
Hi coothead , I was just about to go to bed after staying up all night when I saw your message arrive. I have had a quick look and already see the simplicity of what you have done. I believe it will work, but will redo the code when I get up! Thank you very much for that!...Leave a comment:
-
Thanks John_Betong - I keep forgetting to do that. Sorted out most of the errors and leaving the rest as is. Dealt with the<section>BS by using<h4>and assigning itdisplay:none;andfont-size: 0em;
Still hasn't dealt with the pesky problem....Last edited by judgedredd; Sep 17, 2021, 06:39 AM.Leave a comment:
-
Here is theslider.csscode:
...PHP Code:#partners {
font: normal 1.5em 'LucidaHandwritingItalic',cursive,sans serif;
}
.slider {
height: 250px;
margin: auto;
position: relative;
width: 90%;
display: grid;
place-items: center;
Leave a comment:
-
Here is thescreen.cssfile contents:
...PHP Code:@font-face {
font-family: 'Oswald-Bold';
src: url(fonts/Oswald-Bold.eot);
src: url(fonts/Oswald-Bold.eot?#iefix) format('embedded-opentype'),
url(fonts/Oswald-Bold.otf) format('otf'),
url(fonts/Oswald-Bold.svg#Oswald-Bold)
Last edited by judgedredd; Sep 17, 2021, 05:56 AM.Leave a comment:
-
Two sections not lining up correctly
I have an issue here whereby the area next to an image doesn't go to the same height as the image next to it (which is what the code is meant to achieve). I have everything else on the page working the way I want (baring one or two responsive size glitches, if any), yet this one thing has eaten up a...
-
Hi guys, thanks for the input. I have been a bit lax on responses because I am having teeth troubles. Last week it was a root canal that didn't go according to plan. Today I cracked a tooth right down the middle so have to go and get it extracted. Needless to say, I have not been able to get to the...Last edited by judgedredd; Sep 11, 2021, 01:34 PM.Leave a comment:
-
benanamen thank you for that. John_Betong, I have Linux Mint installed n my Win XP machine but I rarely use it as I find it a pain to reboot the machine everytime I want to use it to edit a site....Leave a comment:
-
I develope online only now because XAMP and those fine folk (NOT) at Zend don't allow the newest version of PHP to be developed on a Win XP machine.Leave a comment:
-
Hi guys. Thanks for everyone's input. I have been able to locate the error log (as I couldn't find it at first) and its over 40MB in size! From what I remember ( typing this on my iPad after turning my work computer off hours ago) that was only two or so days worth. There are two sessions being called...Leave a comment:
No activity results to display
Leave a comment: