I’ve been trying to use the Chrome responsive design tools but they don’t work for me. I can only see viewport widths of up to 1280 pixel on my home laptop. On the Mac at work, I can see widths of up to 1920 pixels. When I look at my website, https://koreanforkicks.com in the responsive design tools for widths more than 1280px, the tangram animation in the top navigation appears to be in the right position but when I look at it on the work computer, it’s not in the right position. So my media queries aren’t working and I can’t fix them because I can’t set up a localhost at work. I don’t work as a programmer or designer. Also, I think there must be a better way to fix the position problem because when I use position: absolute in my css, I have to use different left and top positions for every viewport width. Isn’t there any easier way to do this?
I don’t have time to look into this in great detail but assuming that the animation should always be in the middle div, I think you want to add position: relative to that div so then your absolute positioning of the graphic will be relative to that div.
Thanks, bbsmooth. I added position relative to my stylesheet and commented out the absolute positioning in the media queries. It works in responsive design tools but they aren’t reliable. I will check it out on the wide screen monitor at work today.
I made a big mistake but it looked alright on the large-screen monitor at work anyway. I added another class to the same div and then I wrote position: absolute for one class and position: relative for the other class even though it was the same div. It doesn’t make sense that it worked but it did. Now I want to fix it but I don’t work again until Monday so I can’t check my website at work. I’m going to fix it Sunday night so I can see it the next morning.
I changed position absolute to position relative for the containing div but I still have to write media queries for the tangram animation to be in the right position.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.