Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add media rule to fun.css .plan #649

Open
hugolpz opened this issue May 6, 2019 · 3 comments
Open

Add media rule to fun.css .plan #649

hugolpz opened this issue May 6, 2019 · 3 comments
Assignees

Comments

@hugolpz
Copy link

hugolpz commented May 6, 2019

Related to same .plan class / section as #647.

When testing the responsiveness of the the blue ".plan" section, there is a failure at one point, due to one media rule missing. See 1. working vs 2. failing and 3. failing.

Screenshot from 2019-05-06 15-20-10
Screenshot from 2019-05-06 15-19-42
Screenshot from 2019-05-06 18-55-50

In 1) we have [70px][1] vs [-70px][2] (matching) :

.course-about .description section.plan {
  ... 
  margin-right: -70px;
}
.main-content .left {
    ...
    padding-right: 70px;
    padding-bottom: 70px;
    background-color: white;
}

In 2) we have both [30px][3] vs [-70px][2] (mismatch) :

@media (max-width: 920px) and (min-width: 831px)
.course-about .left {
    padding-left: 100px;
    padding-right: 30px;
}
.course-about .description section.plan {
    ...
    margin-right: -70px;
}

We also have in 3) we have [15px][4] vs [-70px][2] (mismatch) :

@media (max-width: 830px) and (min-width: 768px)
.course-about .left {
    padding-left: 105px;
    padding-right: 15px;
}
.course-about .description section.plan {
    ...
    margin-right: -70px;
}

[1]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 1636
[2]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 1925
[3]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 2118
[4]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 2096


As an other issue, given we talk about the .plan section which presents the very central information of the MOOC's structure and contents, I would recommend to add the following rule :

.course-about .description section.plan li {
	font-size:1.4em; margin-bottom:.4em;
}
@hugolpz
Copy link
Author

hugolpz commented May 9, 2019

Note : ceci affecte le rendu sur la plupart des support mobiles et rajoutant un scroller horizontal pour permettre la visualisation de cette marge hors cadre souhaité.

@rmoch
Copy link
Contributor

rmoch commented May 13, 2019

On regardera si on peut résoudre ce problème qui me semble mineur, lors de la prochaine release.
Merci de votre proposition.

@rmoch rmoch self-assigned this May 13, 2019
@hugolpz
Copy link
Author

hugolpz commented May 13, 2019

Super! Merci l'équipe 💪 ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants