mobile Version

[root9191]

Hello,
could you please optimize the Theme for mobile Version too?
If you select the Theme and look on your Smartphone, the Links are not centered and also the Background does not fit

[FuckingToasters]

Hello, could you please optimize the Theme for mobile Version too? If you select the Theme and look on your Smartphone, the Links are not centered and also the Background does not fit

noticed that too. would like to see an mobile version.

[FuckingToasters]

[JeanCFF]

Could someone who corrected this error share?

[matze19999]

I've tried, but I haven't found the error in the source code. I've compared it to other theme files but no luck

[forge0ne]

@matze19999 @JeanCFF @FuckingToasters @root9191

Quick fix without merge request:
Go to themens/CloudyStorm/brands.css
The following line:
width: 500px;
height: 48;
Exchange with:
min-width: 250px;
height: auto;

The height is necessary otherwise it won't grow automatically when you have long descriptions of the buttons.

Works also on smartphones:
https://tree.tal.hm/@lostindesolation

[forge0ne]

@JulianPrieber I prepared a branch but cannot push the branch to the repository. Can you give me permissions to do so?

Then I can create a pull request for review.

[JulianPrieber]

@JulianPrieber I prepared a branch but cannot push the branch to the repository. Can you give me permissions to do so?

Then I can create a pull request for review.

I'm sorry, but there aren't any public forks. Fork the repo, make the changes, open a pull request.

[forge0ne]

@JulianPrieber never did before so thank for the hint, is completed.

I also linked the issue.

[FuckingToasters]

height: 48;

While this works, it makes the buttons small on desktop as well, i wantedd to keep them on dekstop the same so i've added a media query which handle this.

.button {
  position: relative;
  height: 23px;
  background-color: var(--accentColor);
  color: var(--textColor);
  border: solid var(--accentColor) 2px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px; /* 17px */
  text-decoration: none;
  height: auto;
  /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
  -webkit-tap-highlight-color: transparent;
}

/* Portrait mode */
@media (orientation: portrait) {
  .button {
    min-width: 250px;
  }
}

/* Landscape mode */
@media (orientation: landscape) {
  .button {
    min-width: 500px;
  }
}

[forge0ne]

@FuckingToasters great, can you create a pull request for it? Maybe that works for @JulianPrieber

[JulianPrieber]

height: 48;

While this works, it makes the buttons small on desktop as well, i wantedd to keep them on dekstop the same so i've added a media query which handle this.

.button {
  position: relative;
  height: 23px;
  background-color: var(--accentColor);
  color: var(--textColor);
  border: solid var(--accentColor) 2px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px; /* 17px */
  text-decoration: none;
  height: auto;
  /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
  -webkit-tap-highlight-color: transparent;
}

/* Portrait mode */
@media (orientation: portrait) {
  .button {
    min-width: 250px;
  }
}

/* Landscape mode */
@media (orientation: landscape) {
  .button {
    min-width: 500px;
  }
}

I haven't been able to test this yet, but this looks promising 👍

[FuckingToasters]

@FuckingToasters great, can you create a pull request for it? Maybe that works for @JulianPrieber

Sure thing, here you go: #4

[JulianPrieber]

Love it