Making a Site Mobile Friendly

[JD]

Hey!

I've been developing this site:

axiel-editorial.com/

(https://axieleditorial.boards.net/ is the proboards link if needed)

And I've been attempting to make it mobile friendly.

I thought that the coding I had put in would work given that it should all be based on width of screen. Instead, it goes kinda wonky on a mobile screen. What's worse is, the buttons on the products pages that are supposed to drop down an open space with a contact form in don't run on mobile. So no-one can contact us.

Does anyone knows a way that I can -

a) adjust the CSS of this site to make it appear more mobile friendly on an aesthetic level.
and
b) get those contact forms working on a mobile device?

I would also like to be able to auto redirect mobile users to the desktop version of the site, given that proboards doesn't have the ability to edit the mobile view of a site.

Can any of this be done?? 

Many thanks,

[Alanna 🥀🖤]

Media queries are your friend for adjusting CSS for specific screen resolutions. I also highly suggest implementing flex-box.

By the way, it looks amazing so far! Note that a lot of functions that depend on a cursor do not work on mobile so use media queries to adjust those aspects of your design so all your buttons/etc. are still accessible on mobile.

[JD]

Apr 15, 2020 9:32:58 GMT -8 @khristian said:

Media queries are your friend for adjusting CSS for specific screen resolutions. I also highly suggest implementing flex-box.

By the way, it looks amazing so far! Note that a lot of functions that depend on a cursor do not work on mobile so use media queries to adjust those aspects of your design so all your buttons/etc. are still accessible on mobile.

Oh wow this is a whole new world.... er..... any chance you can spot the things I need to target with these Media Queries? The idea of going through the entirety of my CSS and reediting it for mobile kinda makes me ready to cry. Are there any specific bits that I need to target do you think?

Yeah the lack of cursor function is a key thing I definitely need to get working, if you know how to?

[Alanna 🥀🖤]

I would have to go through everything by hand through Inspect Element to see what exactly you need to target using the media queries, which would be a service I provide!

Creating responsive designs takes time and considering you designed the entire website without this in mind to begin with, I can assume there is a lot you need to do. It's upsetting but in order to create a responsive design, you have to keep mobile in mind while you go!

My best advice is to look at your website on desktop and slowly shrink your browser. The moment you see an issue, right click the area and go into Inspect Element (works on Google Chrome and FireFox), and see what you need to adjust within the CSS to make it look better for that specific resolution and add that to your media queries!

For functions that don't work on mobile... if you have anything that depends on a cursor, like hovers for example, just add in the media queries to force any hidden content to be visible at 300px (which is the width of most mobiles but you can do some research to ensure that this hasn't changed).

[Kami]

In addition to shrinking your browser, if you use chrome and right click to inspect element there is a button at the top left of the console that enables the device emulator. You can switch between different devices (both apple and android) to see how it'll look.

Bear in mind though that both of these tips only emulate the function on a mobile device and there will for sure be quirks between this and the real thing. it'll do if you don't have devices to test on, but if you have access to some that would be best. (I remember using some dynamic text sizing that looked giant on emulator but when I looked on my actual phone it was an appropriate size, as a for instance).

There are also websites that provide these services but unfortunately they're not all free. I have used crossbrowsertesting.com and browserstack, personally.

Also side note -- if you ever see anyone talking about "mobile first" design, this issue you've run into is why we advocate for it! Accommodating for desktop when you start with a mobile responsive base is far easier than accommodating for mobile with a static desktop base.

If you need specific help as you go through this theme, just reach out! There are at least three of us here (hi trinity~!) that are well versed in the subject. (:

[JD]

Apr 15, 2020 10:54:05 GMT -8 @khristian said:

I would have to go through everything by hand through Inspect Element to see what exactly you need to target using the media queries, which would be a service I provide!

Creating responsive designs takes time and considering you designed the entire website without this in mind to begin with, I can assume there is a lot you need to do. It's upsetting but in order to create a responsive design, you have to keep mobile in mind while you go!

My best advice is to look at your website on desktop and slowly shrink your browser. The moment you see an issue, right click the area and go into Inspect Element (works on Google Chrome and FireFox), and see what you need to adjust within the CSS to make it look better for that specific resolution and add that to your media queries!

For functions that don't work on mobile... if you have anything that depends on a cursor, like hovers for example, just add in the media queries to force any hidden content to be visible at 300px (which is the width of most mobiles but you can do some research to ensure that this hasn't changed).

Apr 16, 2020 8:02:29 GMT -8 Kami said:

In addition to shrinking your browser, if you use chrome and right click to inspect element there is a button at the top left of the console that enables the device emulator. You can switch between different devices (both apple and android) to see how it'll look.

Bear in mind though that both of these tips only emulate the function on a mobile device and there will for sure be quirks between this and the real thing. it'll do if you don't have devices to test on, but if you have access to some that would be best. (I remember using some dynamic text sizing that looked giant on emulator but when I looked on my actual phone it was an appropriate size, as a for instance).

There are also websites that provide these services but unfortunately they're not all free. I have used crossbrowsertesting.com and browserstack, personally.

Also side note -- if you ever see anyone talking about "mobile first" design, this issue you've run into is why we advocate for it! Accommodating for desktop when you start with a mobile responsive base is far easier than accommodating for mobile with a static desktop base.

If you need specific help as you go through this theme, just reach out! There are at least three of us here (hi trinity~!) that are well versed in the subject. (:

Thanks guys. In all honesty, I'm a bit worried about a deadline this site is supposed to be done by and trying to learn this myself and fiddle with it to make it work. I'll give it a go (and thank you for your help!) but if anyone has the time and wants to offer whatever they might normally charge for this I'm game <3 I'm doing this design for a client so I would have to check but that might be a preferred route than to have me bumble my way through it.

I've never done design for mobile so I went from desktop first. Clearly this was the wrong thing to do, but we all start somewhere right? >..<" I guess learning to dev for mobile is my next step as a self-taught coder. But I'm a bit worried I might not have the time to do it on this particular project.

I'll start having a go but if anyone wants to PM me with an offer and charge cost please do

[Kami]

As much as I would love to help I have a full time job doing... well, other dev stuff and don't do commission work anymore :( Trinity/Alanna mentioned offering a service so hopefully she'll reply soon.

If you have a specific question about something though, feel free to @ me and I'll see if I can help.

[dustys]

Can I suggest against the black text on black images? I can't read your site.