I have a big confusion and problem when I am doing projects and exercises.
I have realized that some elements only work with specific attributes, I mean, not all attributes work for all the elements.
Not only that, when I put elements inside a
tag, and I put a class for the div, or attributes for the
, they don’t always affect the elements insde.
I am kind of confused right now and would like someone to help me understand, or is there a list of “can do’s” and “can’t do’s”?
All elements can have id, class and title among other things:
Classes can be used on any element, so for properties applied by a class not to work suggests something else is overriding the things you think should be applying.
In that project for example, from line 42 to 44. I tried to modify the height and width of the section, but it did not work, I had to modify the iframe tag directly.
Also I try to position the images, from line 20 to 25 like the example, but they just don’t work. I put for example:
margin-left: XXX and the thing just does not move at all…
Here I just remembered another example, which I am having hard time to figure it out. The right part, where it says “latest posts”, I want the “square” to fit better. But I try modifying the div and it just won’t change.
iframes are a pig to work with. In theory you can specify the size via CSS, in practice, this tends not to work for various reasons. Yes, you will generally have to specify size on the iframe. However, in this case, you’re embedding a youtube video (and you know in advance what the aspect ratio is, and that value is dependable). With iframes and embeds and things you don’t control, general technique is often to put them inside another element, size that element, then snap the iframe/embed/etc to the same size using absolute positioning. It’s also what object-fit is built to help with, which I can send you’ve used, it’s just that that needs to fit to something
Here is a description of a technique to allow you to have a video that resizes responsively (under the "<iframe> Video (YouTube, Vimeo, etc.)" heading):
WIth the images, not quite sure what you mean: if I add a margin they move fine, but I don’t think I’m quite doing what you’re trying to do, can you explain exactly how you want them to look, & what you’re applying properties to?
For some reason I had not received any message that there were new responses here, so I never knew until I checked. I tried to do it all again, without using codepen.io, and when I finished, I pasted everything on codepen, modifying a few things so it adapts to codepen. This is the result:
As you can see, images won’t load, because they were images that I had on my computer, but that is not the thing. In this second attempt, I created 2 flexboxes, and tried to order them that way, but, they would not move the way I wanted. Even with this last attempt, as you can see, the images are not next to the text, but they stick together on top.
On the first attempt, they sticked next to the text , but was not “justified”, “straight line” (I apologize, english is not my main language and it is very complicated to explain myself here).
