Change OCW News mobile(xs) display to horizontal #1184
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Netlify Deployments: |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1184--ocw-next.netlify.app/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1184--ocw-next.netlify.app/search/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-course-v2-pr-1184--ocw-next.netlify.app/ |
Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead
|
This is definitely better. I discussed some further improvements with @mbilalmughal but this is good enough to merge. |
ibrahimjaved12
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
https://github.com/mitodl/hq/issues/1388
Description (What does it do?)
This is a follow up PR to the original issue for some design modification.
Such that currently for small screens(xs), the news images stay a fixed height and tend to go vertical. But we want them to follow the same fashion for small screens as it was originally, i.e, horizontal. This is to help stay consistent with the image sizes and cropping work.
Screenshots (In progress):
How can this be tested?
The overall functionality/layout/design structure has already been tested. For this PR we just want to make sure for smaller screens the view looks correct. Make sure that the changes applied (changed related to numerical values) are actually visible on the page (that they are not overridden by some other properties) and nothing breaks.
For mobile interface (on all sizes where we have one news on display) make sure that no kind of images break the design. I tried testing with 100x100 images and it was ok, you're free to test anything you have in mind too.
You can use the netlify link/local host server and inspect element and add any image link from google in one of the already existing
imgtags to do this.