fixed small screen responsive bug

master
alicestrt 4 years ago
parent 09a8056656
commit 7e7e5c8b10

@ -51,6 +51,12 @@ a {
padding-left: 20px; padding-left: 20px;
} }
@media (max-width: 575px) {
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -54,6 +54,18 @@ a {
padding-top: 70px; padding-top: 70px;
} }
@media (max-width: 575px) {
.title_story {
font-size: 30px;
}
.small_icon {
max-width: 50%;
padding-top: 20px;
padding-left: 50px;
}
}
</style> </style>
<template> <template>

@ -1,9 +1,9 @@
<template> <template>
<b-row class="mb-5-menu"> <b-row>
<b-navbar fixed=top> <b-navbar fixed=top toggleable="md">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav> <b-collapse id="nav-collapse" is-nav>
<b-nav align="right"> <b-nav align="left">
<b-nav-item to='/'>Home</b-nav-item> <b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item> <b-nav-item to='/about'>About</b-nav-item>
<b-nav-item to='/editornote'>Editor's note</b-nav-item> <b-nav-item to='/editornote'>Editor's note</b-nav-item>
@ -21,18 +21,24 @@ export default {
</script> </script>
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
max-width: 100%;
}
a { a {
color: #333042; color: #333042;
font-family: 'Permanent Marker', cursive; font-family: 'Roboto Mono', monospace;
font-size: 16px;
text-shadow: 1px 1px 1px #333042;
} }
a:hover { a:hover {
color: #ff4c2b; color: #ff4c2b;
text-shadow: 1px 1px 1px #ff4c2b;
}
@media (max-width: 575px) {
a {
font-size: 12px;
}
} }
</style> </style>

@ -11,6 +11,11 @@
} }
body {
background-color: #ffe6e6;
min-height: 100vh;
}
a:hover { a:hover {
color: #333042; color: #333042;
text-decoration: none; text-decoration: none;
@ -60,9 +65,21 @@ a {
} }
#sparkle { #sparkle {
padding-top: 50px; padding-top: 80px;
} }
@media (max-width: 575px) {
#mag_title {
font-size: 60px;
padding-top: 20px;
padding-left: 20px;
}
#mag_subtitle {
font-size: 18px;
padding-left: 20px;
margin-top: 20px;
}
}
</style> </style>

@ -65,6 +65,17 @@ a {
.bbq_images { .bbq_images {
padding-top: 40px; padding-top: 40px;
} }
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -68,6 +68,18 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -75,6 +75,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -66,6 +66,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -68,6 +68,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -59,6 +59,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -68,6 +68,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -73,6 +73,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -44,7 +44,7 @@ a {
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 40px;
} }
.author { .author {
@ -68,6 +68,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -70,6 +70,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -69,6 +69,16 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -53,6 +53,17 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
}
</style> </style>
<template> <template>

@ -32,7 +32,7 @@ a {
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 15px; font-size: 15px;
padding-left: 150px; padding-left: 100px;
} }
.title_story { .title_story {
@ -65,6 +65,20 @@ a {
.zoom:hover { .zoom:hover {
transform: scale(1.1);} transform: scale(1.1);}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 25px;
}
.content_poem {
padding-right: 20px;
padding-left: 60px;
}
}
</style> </style>

Loading…
Cancel
Save