Jump to content
GreenSock

goodcontext

Can I make this site a responsive web?

Recommended Posts

This is a portfolio site for my employment.

I'm a newbie, but I was able to make it like this because many people helped me on the GSAP site.
The site has a desktop version, and I think I need to work on a responsive web.
The site has too much technology, so I'm not sure if I can make it into a responsive web.
Can I create a responsive web with this site in a short period of time?
Even if I can create a responsive web, it would be better not to touch the site if it takes more than a month.
The goal is to complete the portfolio site as much as possible within this month.
I'm afraid to reveal my work like this, but I'll take the courage to ask you a question.
I will erase the site link when I get an answer.

Link to comment
Share on other sites

Hello!

 

That's a lovely site, well done.

 

I'm afraid I can't tell you how long it will take you as I don't know how much free time you have, what you know, or how quickly you code.

From a GSAP perspective, this will help -

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

And from a styling perspective this will help

https://web.dev/responsive-web-design-basics

It's very common for people to cut down on animations and simplify layout on mobile - I do. Bear in mind that people on mobile are usually in a hurry, on the move, on limited data connections and just want to access content quickly.

 

It's not a failure to simplify things, in fact it can help the end user - if that helps you get the site finished in time that's a bonus!

 

Good luck

  • Like 1
Link to comment
Share on other sites

Thank you for the good information.
I wasn't confident, but I should give it a try.

I think companies also see the technology of creating responsive webs as a necessity.
Have a nice day.

  • Like 1
Link to comment
Share on other sites

I have three questions.
I'm done with the responsive web.
In your PC's web browser, reducing the window size works fine.
By the way, if you look at the Chrome browser on your phone, it doesn't work properly.
The animation stops.
It's the same Chrome browser, why is it like this?

The second question is that desktop views in a mobile phone web browser do not match the layout. Even though the width is 100%, the image looks reduced to about 50%, and the hidden image on the right side is visible.
Is there no solution to this?

And the circle text animation that rotates in a circular shape didn't work properly, so I deleted it at all.
It worked well when viewed in 1920 x 1080 resolution on a PC without media queries.
However, if you create a responsive web, reduce the window size of the web browser, and return to it, the circle-shaped circle text animation disappears or cannot be fixed. In other words, when you scroll down, it goes up. This is the third question, should I make a minimal demo to know exactly?

 

For your information, I will post a link to the portfolio site address again this time. (I will erase the site link when I get an answer.)
CSS alone has 1300 lines, so I'm not asking you to look at the code. If you need to see the code, I will make a minimal demo if I can.
The third question, circle text animation, deleted the code and is currently invisible. If you need to answer, I'll add the code I've backed up, or I'll create a minimal demo.

 

Thank you for reading the long question.

Link to comment
Share on other sites

Hi there mate,

 

Great job so far - it looks good!

 

I'm not really sure what the question is though I'm afraid. if you can make a minimal demo with as little code as possible to show the issue we'll see if we can help.

 

We can only help with GSAP related issues though - responsive styling issues are out of scope for these free support forums I'm afraid.

  • Like 1
Link to comment
Share on other sites

I solved the first and second questions.
It works well when I write smoothTouch: 0.1 in ScrollSmooth.create.

The third question is that I deleted circle text animation from my portfolio anyway, so I'll have to look at it again when I have time later.

I found another problem, but the vertical length is cut in landscape mode on the mobile phone. I think that's the problem because I gave the width value and the % value.
Should I just give the px and rem value, and give the vw and % only when I really need them?
I don't think it's related to GSAP, so it doesn't matter if you don't answer.
Thank you. Have a nice day.

  • Like 1
Link to comment
Share on other sites

That's going to depend on where and how you're using vw and %.

I can't advise without seeing your use-case I'm afraid, this is still a bit too vague. If you can put together a demo I can take a look!

  • Like 1
Link to comment
Share on other sites

It's not a minimal demo, but I'll show you the link to my portfolio site again.
The CSS is 1300 lines, but you can search with vw or %.

The number of vw is 11, and the number of % is 44. There's a lot of %.

You don't have to look at all the codes, just look at the landscape mode on your mobile and let me know.
Based on the landscape mode, I wonder if this is okay.
Thank you very much for your concern.

Link to comment
Share on other sites

I'm really sorry pal but I don't know what you want me to look at. 😕

It looks fine to me, I can't see any immediate issues.

  • Like 1
Link to comment
Share on other sites

I was wondering if it would be okay to cover the bottom part of the image because the horizontal length gets longer in landscape mode.
I'm glad to hear that there's no problem with the site.
Thank you very much. It helped me a lot to create a portfolio site.
Now I just need to make an intro site.
Thank you very much for your concern.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×