Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Playing around with Drew Wilson's atvImg = 'AppleTV Image' Reply To: Playing around with Drew Wilson's atvImg = 'AppleTV Image'

#234755
drone4four
Participant

Yeah, I deliberately left out the transform because in playing around with it initially right after you made your suggestion, I could have sworn it made the button and the words disappear. But moments ago I just tried adding the transform property again with your translation value and it looks great in my pen and in the html and css on my test-case website. So yeah, the box is now perfectly centered from the top and from the sides. Thank-you @michaellee for your suggestions.

The Enter element is in the header, as you noticed and I am not sure why. I didn’t write most of this html. I borrowed it from Drew Wilson’s GitHub page. He would probably have a really good answer. What do you think of keeping it in the header? Would it be better to re-arrange the elements out of the header and into the subsequent dividers in accordance with best practices?

Here is my pen with the latest changes: http://codepen.io/Angeles4four/pen/YyJxxz

 If you pinch the browser window size to emulate smaller screens like mobile devices, notice how the spacing between the Enter button is off slightly? The paragraph text is way too close to the Enter button sometimes. This can be remedied by adding two line breaks above my h2 element in my markup. This is just a quick fix though. I suppose there is probably a more elegant solution to be had with css. What would you recommend, michaellee?

By the way, I’d like to reverse the orientation of the button and text so that the text appears on the right and enter appears on the left at wider browser sizes. Further more, at narrower browser sizes, I’d like to have the button appear below the text rather than above (as is the case right now). In my text editor I actually replaced all the instances of ‘right’ with ‘left’ and vice versa. That didn’t achieve what I set out to do. Is achieving this as simple as flipping or adding a few key properties or changing some values?