search

Algolisted-Org / AlgoListed

Algolisted is an AI-powered platform dedicated to assisting computer science students in preparing for placements and internships. Our services include tracking and analytics across various platforms and topics.
http://algolisted.com
Other
164 stars 99 forks source link

#61 Created mobile cards #65

Closed JordanAdair closed 1 year ago

JordanAdair commented 1 year ago

Created Mobile Cards in the format suggested, although I feel like we could make these look a little better somehow. Would love to hear any suggestions.

I decided against the giant clickable field since it actually was kind of annoying. I'd try to scroll and would accidentally click it lol.

Also, I can't figure out how to specifically target the content above the cards (filter, text, etc.) on mobile. I wanted to keep it in line with the cards, but I can't figure out how to "target" those with CSS.

JordanAdair commented 1 year ago

I also want to adjust the size of the filters as they'll be difficult to click on mobile as they are now.

NayakPenguin commented 1 year ago

I also want to adjust the size of the filters as they'll be difficult to click on mobile as they are now.

Sure! You can create an issue to propose a change. Can you please provide more information about the change you have in mind? For example, will the change involve adjusting the width of each filter to be 100%?

NayakPenguin commented 1 year ago

@JordanAdair Great stuff man!

Also, I can't figure out how to specifically target the content above the cards (filter, text, etc.) on mobile. I wanted to keep it in line with the cards, but I can't figure out how to "target" those with CSS.

I couldn't understand what you are referring here, can you send a screenshot so that it becomes clearer?

JordanAdair commented 1 year ago

I'll be out of my house for the day so I'll do my best to explain it better:

Above the cards are two filter/sort buttons, and a title + paragraph. I want to keep them aligned with the cards themselves. Imagine a parallel line going up from each vertical edge of each card. I want the filter and sort buttons to stay within this line, however, I couldn't figure out how to target these values, i.e.: 

.sort-button { <-- This would be "targeting" the sort-button class. 
    //CSS goes here
}

Using inspect element I found out the class name for these buttons, but couldn't figure out which styled.div had access to it. It looks like MobContainer had access to it, but if I take off the "display: none" for the mobile media query it breaks the whole thing and the formatting of the page goes everywhere.

Additionally, I want to increase the size of these elements by about 1.5x their current size. It should look and feel natural on a mobile device, and currently I think it's a bit too small.

NayakPenguin commented 1 year ago

I understand your suggestion for changes to the site and will consider them.

As for the font size, I will gather some feedback before deciding if it needs to be adjusted.

On a different note, I'm curious if you have any experience or knowledge in the areas of SEO or web scraping.

JordanAdair commented 1 year ago

The font size might be alright the way it is, but the elements should be aligned with everything else or it looks inconsistent. My main issue is having clickable elements that are difficult to click on mobile devices.

As for SEO, a year ago I taught myself the basics to start a blog (keyword research, long-tail/short-tail keywords, link building, dwell time, etc.) but I made that blog with WordPress so I don't specifically know what needs to be done under the hood aside from using proper semantic HTML elements.

NayakPenguin commented 1 year ago

Yes, the inconsistent font size is an issue that needs to be addressed. I think 0.85rem is the size that I think should be used. Would love to get suggestions or if you think some other size is better you can try it for sure.