Tribute Page
So I finished (or so I thought) my Tribute Page and really like it. But I’m having issues.
- I used Chrome Inspect to check mobile responsive and it looked great there. When I look at it with my actual iPhone it looks completely different (still using chrome) and the bottom link doesn’t work and it looks horrible.
Does anyone know why? Is this a codepen thing?
- I could not resize one of my images. No matter what I tried. The other images I could resize no problem.
Does anyone know why? Can there be some kind of copyright thing on images that stops editing?
- When I open it with Firefox on laptop, the links do not work and the buttons look different.
Does anyone know if you should only use codepen with chrome?
Edit 1: #2 is solved (thanks @ThamiMemel) I was trying to resize the figure element including the figcaption instead of trying to resize just the image.
Edit 2: #3 I fixed this after some research. From what I read, Firefox does not recognize buttons with links. So I deleted the button elements and used a p element with the link anchored to the text, then I used CSS to style it like a button. Now it works and looks just like it does in Chrome browser.
2 Likes
-
It probably is a codepen thing.
-
There is no such as things copyright thing to block from editing. Which image is it? how are you trying to resize it?
-
Different browsers take different stance on how to consume html elements although they are very minor.
Once advice for you is to change how buttons look. It’s hard to read the text inside. Try changing either background-color or text color to give them contrasts for better readability.
-
Thanks
-
It’s img-1 . If I use .img-1 { width: 70%;} then the text will move left like the image actually resized but the image is still the same and the text will overlap the image. I also tried px instead of % and tried auto. Everything I tried seemed like the box changes but the image will overlap into padding, margin etc to stay the same. But everything around it acts like the image actually resized. I could not change it using @media either so I ended up using overflow:hidden to make it look like it was smaller.
-
Thanks, unfortunately there were major changes.
-
On my end, the button looks like the reply button here on this page. Blue background and white text. Not sure why it’s changing when others view it, or how to stop it from changing.
I think I’m going to recreate this project using something other than codepen and see if it makes a difference. If not then I’ll know it’s me lol.
hey first well done i loved your design and it’s completely responsive on my android, i don’t know about iphone, try using safari to check it’s the best browser to test on iphone.
for the image resize problem it’s quit simple, the problem is that the “img-1” class is set for the figure not the image, so when you try to change the width or height through css you are changing it for the whole figure including figcaption, the solution is easy either give the class for the image alone or give the image a unique id and change the width using it.
1 Like
Of course it would be something simple!
Thanks, the image is resizing.