varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-01-01 01:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minor logo bugs

Browse Source
This commit is contained in:
officiallyutso
2025-06-28 00:34:05 +05:30
parent 3adb946a8b
commit 147064b359
2 changed files with 100 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
css/mobile.css
View File

@ -13,8 +13,7 @@
max-width: 100%;
}
/* Pre-nav and Navigation - Fixed positioning with LEFT ALIGNMENT */
.pre-nav, .pre-footer {
.pre-nav {
height: auto;
min-height: 80px;
padding: 15px 0;
@ -25,8 +24,7 @@
justify-content: flex-start;
}
.pre-nav .brand,
.pre-footer .brand {
.pre-nav .brand {
display: flex;
float: none;
text-align: left;
@ -35,31 +33,35 @@
width: auto;
align-items: center;
flex-shrink: 0;
gap: 0px; /* Add gap between logo and text */
gap: 10px; /* Reduced gap between logo and text */
}
/* Logo and text container alignment - FIXED */
/* Logo - FIXED: Removed excessive padding */
.pre-nav .brand .logo {
height: 50px;
padding-left: 50px;
margin-right: 0; /* Remove margin, using gap instead */
flex-shrink: 0; /* Prevent logo from shrinking */
padding-left: 15px; /* Changed from 50px to 15px */
margin-right: 0;
flex-shrink: 0;
}
.pre-nav .name-container {
text-align: left;
padding-left: 0; /* Remove excessive padding */
flex-grow: 0; /* Don't grow */
padding-left: 0;
flex-grow: 0;
margin-left: 0; /* Ensure no extra margin */
}
.pre-nav .name-container .name {
font-size: 16px;
margin: 0;
line-height: 1; /* Tighter line height */
}
.pre-nav .name-container .desc {
font-size: 12px;
font-size: 20px;
margin: 0;
line-height: 1.2; /* Tighter line height */
margin-top: 4px; /* Small gap between name and desc */
}
.pre-nav .social {
@ -557,6 +559,7 @@
padding-left: 15px;
padding-right: 15px;
margin-bottom: 20px;
}
/* Facebook Plugin Responsiveness */
@ -595,17 +598,7 @@
object-fit: cover;
}
/* Footer */
footer {
margin-top: 30px;
padding: 20px 15px;
}
.copyright {
text-align: center;
font-size: 12px;
padding-top: 15px;
}
/* Utility Classes */
.hidden-mobile {
@ -674,7 +667,22 @@
.pre-nav .brand .logo {
height: 45px;
margin-right: 12px;
padding-left: 10px; /* Even less padding for small screens */
}
.pre-nav .brand {
gap: 8px; /* Smaller gap on very small screens */
}
.pre-nav .name-container .name {
font-size: 14px;
line-height: 1;
}
.pre-nav .name-container .desc {
font-size: 19px;
line-height: 1.2; /* FIXED: Better readability on small screens */
margin-top: 3px; /* FIXED: Adjusted spacing for smaller screens */
}
#header .title {
@ -702,14 +710,6 @@
font-size: 18px;
}
.pre-nav .name-container .name {
font-size: 14px;
}
.pre-nav .name-container .desc {
font-size: 11px;
}
/* Adjust toggle button for smaller screens */
.navbar-toggle {
right: 10px;
@ -1092,3 +1092,61 @@
}
}
}
.facebook-widget-container {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
padding: 0 15px !important;
text-align: center !important;
}
.facebook-widget-container .fb-page {
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}
/* Mobile specific centering - FORCED */
@media (max-width: 768px) {
.facebook-widget-container {
padding: 0 !important;
margin-top: 20px !important;
justify-content: center !important;
display: flex !important;
text-align: center !important;
width: 100% !important;
}
.facebook-widget-container .fb-page {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
}
/* For smaller screens - FORCED */
@media (max-width: 480px) {
.facebook-widget-container {
padding: 0 10px !important;
display: flex !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
}
/* Specific override for the featured articles container */
#featured-articles-container .col-md-4 {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
text-align: center !important;
width: 100% !important;
}

10
index.html
View File

@ -17,8 +17,16 @@ title: "Watch Out, IIT Roorkee"
{% endfor %}
{% endfor %}
</div>
<!-- Replace the Facebook widget section in your index.html with this: -->
<div class="col-md-4">
<div class="fb-page" data-href="https://www.facebook.com/watchoutiitr/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/watchoutiitr/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/watchoutiitr/">Watch Out! News Agency</a></blockquote></div>
<div class="facebook-widget-container">
<div class="fb-page" data-href="https://www.facebook.com/watchoutiitr/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/watchoutiitr/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/watchoutiitr/">Watch Out! News Agency</a>
</blockquote>
</div>
</div>
</div>
</div>
</div>