Merge pull request #473 from nottnottloop/cssimprovements2

Improve responsiveness for mobile screens for sites with large site stats
This commit is contained in:
Kyle Drake 2024-01-22 09:07:01 -06:00 committed by GitHub
commit 2e2ddec790
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 16 deletions

View file

@ -1127,6 +1127,25 @@ a.tag:hover {
margin-left: 0;
}
}
.interior .header-Outro .col.col-50.signup-Area.site-display-preview-wrapper {
@media (max-device-width:480px), screen and (max-width:800px) {
padding: 0 7%;
}
}
.interior .header-Outro .site-display-preview {
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0 auto 5px;
}
}
.interior .header-Outro .site-info-row {
@media (max-device-width:480px), screen and (max-width:800px) {
padding: 20px 0%;
}
}
.interior .header-Outro .stats {
margin-bottom: 1.3em;
float: left;
@ -1134,18 +1153,32 @@ a.tag:hover {
margin-top: 1.9em;
@media (max-device-width:480px), screen and (max-width:800px) {
float: none;
width: 270px;
margin: 0.9em auto 5.5em auto;
text-align: center;
margin-top: 0.5em;
display: flex;
justify-content: center;
}
}
.interior .header-Outro .stats .tips {
@media (max-device-width:480px), screen and (max-width:800px) {
display: none;
}
}
.interior .header-Outro .stats .stat {
float: left;
text-align: center;
margin-right: 28px;
color: #84997E;
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0;
width: fit-content;
min-width: 90px;
}
}
.interior .header-Outro .stats strong {
font-size: 1.5em;
font-weight: normal;
@ -1157,17 +1190,7 @@ a.tag:hover {
clear: both;
display: block;
}
.interior .header-Outro .stats .stat {
float: left;
text-align: center;
margin-right: 28px;
color: #84997E;
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0;
width: 90px;
}
}
.interior .header-Outro .stats .stat.tips {
width: 60px;
}

View file

@ -8,9 +8,9 @@
</div>
</div>
<% end %>
<div class="row content">
<div class="col col-50 signup-Area large">
<div class="signup-Form">
<div class="row content site-info-row">
<div class="col col-50 signup-Area site-display-preview-wrapper large">
<div class="signup-Form site-display-preview">
<fieldset class="content">
<a href="<%= site.uri %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
</fieldset>