i. The Coder's Society

astrophile · August 19, 2020, 10:22pm

fake title.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor felis sit amet nisi sollicitudin vehicula. Sed volutpat nulla sit amet orci lacinia tempus. Phasellus in dictum arcu, sit amet luctus ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet mauris gravida nunc sodales, id tincidunt augue ultricies. Cras sagittis urna pretium velit vestibulum, quis molestie velit ornare. Fusce condimentum tempus vulputate. Suspendisse potenti. Ut ullamcorper dictum quam ac pulvinar. Donec laoreet, massa sed commodo porta, lorem quam ultricies libero, a eleifend leo est suscipit urna.

✧ coded by astrophile ✧

astrophile · August 24, 2020, 10:34pm

hello

astrophile · August 25, 2020, 2:38pm

Testing Result: Videos not able to be embedded.

21 5b 7c 31 32 32 78 31 35 33 5d 28 75 70 6c 6f 61 64 3a 2f 2f 63 31 64 79 39 39 4c 57 36 61 4e 71 4d 54 67 50 69 7a 6d 6f 46 4d 57 42 48 6d 67 2e 70 6e 67 29

nighted · August 26, 2020, 6:22pm

@astrophile would you be able to help me make this mobile responsive?

limbo<span style="font-size:; display: block; background-image: url('https://media.discordapp.net/attachments/663177896243757140/747957808414326794/IMG_0986.JPG'); background-size: 150px 150px; width: 150px; height: 150px; border: 3px solid #D0DCE5; margin-left: 7px; margin-top: -150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui. Dignissim convallis aenean et tortor at risus. Amet nulla facilisi morbi tempus. Vitae purus faucibus ornare suspendisse sed nisi lacus sed.

astrophile · August 26, 2020, 6:30pm

What does it currently look like when used?

nighted · August 26, 2020, 6:32pm

Like this, though it is in messages so I don’t know if that would effect how it would look.

astrophile · August 26, 2020, 6:39pm

Try posting it here. Messages is acting a bit odd.

nighted · August 26, 2020, 6:41pm

limboLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui. Dignissim convallis aenean et tortor at risus. Amet nulla facilisi morbi tempus. Vitae purus faucibus ornare suspendisse sed nisi lacus sed.

nighted · August 26, 2020, 6:42pm

It’s not as cut off as messages, I can see the entire post. But the space around the white area isn’t even.

astrophile · August 26, 2020, 6:42pm

I haven’t written my new lesson on mobile responsiveness yet but I can show you my old one if it would help.

nighted · August 26, 2020, 6:42pm

Yes please, that would be great.

astrophile · August 26, 2020, 6:43pm

Assignment #7 Unit 7: Mobile Responsiveness

This will be, without a doubt, the hardest assignment given so far.

Do not wait until the last minute to start it. You are likely to mess up.

Have you ever been on the threads on your phone before?

You ever notice how code looks different on a phone versus a computer?

Well, in case you haven’t noticed, it is noticeably different.

Exhibit A: desktop / mobile

Exhibit B: desktop / mobile

Phone screens are smaller. It’s natural.

But do you know what’s not natural?

When coded threads break because of it.

I will break this lesson into two main parts:

● how to code in a way that is mobile friendly

● how to check for mobile responsiveness

Part One: Mobile Friendly Coding

There are three main ways (that I know of) to do this:

● code everything for your thread within the middle 300px of the post box

● do not define a width for your outer span and then code the inner spans relative to the outer span

● code using vw and vh as your units or code with percentages as your units

(You can read more about the third method here.)

Pros and cons of each method: click me.

Some code you can use as a base for the three methods:

● Method 1

● Method 2

● Method 3

1. For the assignment this week, I’d like you to design two mobile responsive threads.

You are required to use two different methods for each one and I will check.

I will also be grading this assignment from my phone, so if anything is cut off, you will fail.

2. Anyone who does all three of the methods will get a figurative gold star from me.

3. Post your response in reply to this post and share the code with me via Pastebin.

(Preferably in the same post but if things get weird, a separate post for each method is okay.)

(Just make sure each method has its own Pastebin link and it’s a direct reply to this post.)

4. Submissions will close May 25th @ 5pm PDT. Grades will be given shortly after.

5. Any questions? Just ask. Don’t be shy of asking. I’m here to help.

Part Two: Checking Mobile Responsiveness

You thought we were done? Not yet. Now, let’s check your work.

So, there are three main ways to do this:

1. Go on an actual phone and look at your design. (Duh.)

2. If, on Google Chrome, right click anywhere on the webpage, select “inspect element”.

You should see something like this on your screen:

Ignore the right side of the screen. It’s not important for this. Let’s focus on the left.

Notice how on the top part of the image, it says “iPhone X”.

That is where you want to click, and if you click on the arrow next to it, this appears:

Select different devices. See how your code looks. Fairly simple, right?

3. Resize your browser by dragging it to one side to collapse it.

Regular full-size browser:

Shrunken browser:

I highly recommend using at least two, if not all three methods, to check your code.

Anywho, I’ve kept you all sitting here long enough. Go forth and code, young warrior!

[tags]

nighted · August 26, 2020, 7:07pm

limboLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui. Dignissim convallis aenean et tortor at risus. Amet nulla facilisi morbi tempus. Vitae purus faucibus ornare suspendisse sed nisi lacus sed.

nighted · August 26, 2020, 7:29pm

Well, this works on my phone and on a smaller tab… I wonder why inspect just won’t do.

dumplingbabe · August 27, 2020, 12:10am

@astrophile how do I make two span boxes side by side like this?

this is the code for my 2 boxes if you need it

astrophile · August 27, 2020, 12:13am

<span style="font-size: 10px; font-family: ARIAL; display: block; color: #D50094; background-color: pink; height: auto; width: 100px; border: 2.5px solid purple; padding: 7px; text-align: center; text-transform:uppercase; letter-spacing: 3px; margin: auto;"> examples <span style="font-size: 10px; font-family: ARIAL; display: block; color: #D50094; background-color: pink; height: auto; width: 100px; border: 2.5px solid purple; padding: 7px; text-align: center; text-transform:uppercase; letter-spacing: 3px; margin: auto;"> form

I added an outer span with using the flexbox system in it. You can explore flexboxes more here or wait for my lesson on it: https://css3generator.com/

dumplingbabe · August 27, 2020, 12:14am

thank you!!!

dumplingbabe · August 27, 2020, 12:15am

and one last thing (sorry!) how do you adjust the distance apart the 2 boxes are?

astrophile · August 27, 2020, 12:16am

No problem.

astrophile · August 27, 2020, 12:19am

You can change the value for the justify-content property to something else.

https://www.w3schools.com/cssref/css3_pr_align-content.asp