Edit: ive tried my mac and phone and nothing works
3 Likes
What options do you get when you right-click an image?
2 Likes
Unit 5: Padding vs. Margin
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
I’ve noticed a few of you starting to make your own thread designs around the forums and while I think that’s great, you may have run into a few issues already regarding mobile responsiveness. Don’t worry. I’ll help you all with that problem by the end of this course. It’ll be our 9th unit. (10 units total.)
Anywho, today, I want to spend some time talking about the differences between padding and margin because both are properties that I use a lot when making my own thread designs. To illustrate:
Padding adds space around the content of your span box, so that the words aren’t squished up against the edges of the box. Margin is typically used for positioning the box as a whole because it affects the space outside the box. The following image might make this aspect more clear:
Now, let’s get started with using them in our own code!<span style="font-size:; display: block; border: 2px solid;">Notice how the text touches the border directly? Let's fix that.</span>
Use the above base code if you’d like and add in the padding and margin properties to it. Padding is typically written as padding: 20px; or padding-top: 20px; if you only want it applied to one side. Margin is written in a similar manner; you can use either margin: 10px; or margin-left: 10px; to specify the left side. I recommend messing around with the values to see what happens.
For the assignment this week, please submit code that incorporates both padding and margin. You are welcome to customize other things if you’d like as well. Go ahead. Surprise me. I’ll be waiting. Also, just as a heads-up but next week (September 14th), there will be no new assignment. Consider it as a mid-class break. Unit 6 will be posted on September 21st. I will still grade unit 5 and you’ll hear back from me about it next week Tuesday. Let me know if you have any questions about the course itself.
Direct reply to this message with your submission by September 14th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!
10 Likes
Cooy, download, add to linked file, open in new tab, things like that
4 Likes
If you click open in a new tab, what happens?
2 Likes
It opens it in the site its from and gives me the same options
3 Likes
Like it takes you to a tab where you see only the image, right?
2 Likes
No, it takes me to Wikipedia or Unsplash or wherever the images original home is
3 Likes
Are you on a computer right now?
2 Likes
Im on my phone atm
3 Likes
Ah, okay. I was going to have you try something.
Hm. What kind of phone is it again?
2 Likes
Iphone 6s
3 Likes
And you use safari as your web browser?
2 Likes
Yes, and im ios 13.6.1
3 Likes
Okay, cool, I’ll poke around for a bit and let you know if I find anything. I use the google chrome app as my default phone browser, which is why I had more options.
2 Likes
Thank you so much… : )
3 Likes
Okay, I think I found a solution.
- I typed this into Safari search:
“seamless repeating background tumblr”
It took me here:
- I picked the image in the top left for the sake of an example:
- From here, I tapped and held on the image until the menu thing came up:
- I tapped on share and then clicked “copy” in the next menu that appeared.
- I came back here and used paste to find this in my clipboard:
https://64.media.tumblr.com/162cc3dfa5cef6c882aba5453445f0fb/tumblr_mx3y1yYFad1qcm0eto1_1280.png
Notice how it ends in .png
Let me know if this method works or doesn’t work for you.
3 Likes
https://64.media.tumblr.com/331b4255cf005436b7b2e8b2532974c3/tumblr_ogo67kkkOV1qfyhwoo1_400.png
OMG IT WORKED
3 Likes
3 Likes
Yay! Glad I could help!
3 Likes