How do I make my website buttons shrink with the screen resolution?2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?How can I know which radio button is selected via jQuery?How to remove close button on the jQuery UI dialog?How to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How do I make a placeholder for a 'select' box?How to make Twitter Bootstrap menu dropdown on hover rather than clickHow can I make Bootstrap columns all the same height?CSS3 - Image Slideshow
What are actual Tesla M60 models used by AWS?
Am I not good enough for you?
Motivation for Zeta Function of an Algebraic Variety
Poincare duality on the level of complexes
Declaring and defining template, and specialising them
Do recommendation systems necessarily use machine learning algorithms?
Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?
How to fix the Unknown Command error caused by starting CmdInit.cmd using TCC/LE?
Was Luke Skywalker the leader of the Rebel forces on Hoth?
Does this video of collapsing warehouse shelves show a real incident?
Warn me when the equation number is pushed to the next line
They call me Inspector Morse
Are tamper resistant receptacles really safer?
Why was Goose renamed from Chewie for the Captain Marvel film?
Why does the negative sign arise in this thermodynamic relation?
Database Backup for data and log files
How can I get players to stop ignoring or overlooking the plot hooks I'm giving them?
Aliens englobed the Solar System: will we notice?
If I receive an SOS signal, what is the proper response?
what is the meaning of 0x0? say when variable gets assigned to it, example: keccak256(number) = 0x0;
Is "history" a male-biased word ("his+story")?
When traveling to Europe from North America, do I need to purchase a different power strip?
UART pins to unpowered MCU?
Counting all the hearts
How do I make my website buttons shrink with the screen resolution?
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?How can I know which radio button is selected via jQuery?How to remove close button on the jQuery UI dialog?How to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How do I make a placeholder for a 'select' box?How to make Twitter Bootstrap menu dropdown on hover rather than clickHow can I make Bootstrap columns all the same height?CSS3 - Image Slideshow
My current website is having "issues" (not really a issue just bothers me) with my buttons hiding when the resolution changes to something smaller. Here is a gif so you understand it better. https://i.imgur.com/nlkJs5G.gifv. How can I fix it so it shrinks with the page so people can still click it on different screen resolutions?
Here is a link to my website https://newcool.win/ (P.S f12, ctrl, etc. are disabled. So if you want to need the console you have to pull it up before it loads) (P.P.S After just looking through my code again it looks like there is a bunch of 'user fuckups' (bunch of html closing tag are playing hide and seek) and will be fixing them at the same time I'm fixing the button issue)
Underneath is the html for the buttons. The .css for fab or fa-steam-symbol or fa-discord etc. is from https://fontawesome.com/ (if anyone is not familiar with it)
.awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>If I am missing anything or if you have questions please let me know and I will try to answer them.
html css
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
add a comment |
My current website is having "issues" (not really a issue just bothers me) with my buttons hiding when the resolution changes to something smaller. Here is a gif so you understand it better. https://i.imgur.com/nlkJs5G.gifv. How can I fix it so it shrinks with the page so people can still click it on different screen resolutions?
Here is a link to my website https://newcool.win/ (P.S f12, ctrl, etc. are disabled. So if you want to need the console you have to pull it up before it loads) (P.P.S After just looking through my code again it looks like there is a bunch of 'user fuckups' (bunch of html closing tag are playing hide and seek) and will be fixing them at the same time I'm fixing the button issue)
Underneath is the html for the buttons. The .css for fab or fa-steam-symbol or fa-discord etc. is from https://fontawesome.com/ (if anyone is not familiar with it)
.awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>If I am missing anything or if you have questions please let me know and I will try to answer them.
html css
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
2
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
1
@newcool you can make the button's rowposition:fixedto bottom to make them always visible when you resize screen. Other way use this in media query.
– Amarjit Singh
Mar 7 at 9:00
add a comment |
My current website is having "issues" (not really a issue just bothers me) with my buttons hiding when the resolution changes to something smaller. Here is a gif so you understand it better. https://i.imgur.com/nlkJs5G.gifv. How can I fix it so it shrinks with the page so people can still click it on different screen resolutions?
Here is a link to my website https://newcool.win/ (P.S f12, ctrl, etc. are disabled. So if you want to need the console you have to pull it up before it loads) (P.P.S After just looking through my code again it looks like there is a bunch of 'user fuckups' (bunch of html closing tag are playing hide and seek) and will be fixing them at the same time I'm fixing the button issue)
Underneath is the html for the buttons. The .css for fab or fa-steam-symbol or fa-discord etc. is from https://fontawesome.com/ (if anyone is not familiar with it)
.awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>If I am missing anything or if you have questions please let me know and I will try to answer them.
html css
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
My current website is having "issues" (not really a issue just bothers me) with my buttons hiding when the resolution changes to something smaller. Here is a gif so you understand it better. https://i.imgur.com/nlkJs5G.gifv. How can I fix it so it shrinks with the page so people can still click it on different screen resolutions?
Here is a link to my website https://newcool.win/ (P.S f12, ctrl, etc. are disabled. So if you want to need the console you have to pull it up before it loads) (P.P.S After just looking through my code again it looks like there is a bunch of 'user fuckups' (bunch of html closing tag are playing hide and seek) and will be fixing them at the same time I'm fixing the button issue)
Underneath is the html for the buttons. The .css for fab or fa-steam-symbol or fa-discord etc. is from https://fontawesome.com/ (if anyone is not familiar with it)
.awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>If I am missing anything or if you have questions please let me know and I will try to answer them.
.awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div> .awrapper
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
.media
font-size:30px;
text-align:center;
padding-top:30px;
.media>a
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
.media>a#vk
font-size:35px;
.media>a:last-child
margin-right:0;
.animated
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
@-webkit-keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
@keyframes fadeInUpBig
from
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
to
opacity:1;
-webkit-transform:none;
transform:none
.fadeInUpBig
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
.hvr-grow
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
-webkit-transform: scale(2);
transform: scale(2);
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>html css
html css
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
edited Mar 7 at 6:54
לבני מלכה
10.7k1827
10.7k1827
asked Mar 7 at 6:53
newcoolnewcool
235
asked Mar 7 at 6:53
newcoolnewcool
235
asked Mar 7 at 6:53
newcoolnewcool
235
235
2
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
1
@newcool you can make the button's rowposition:fixedto bottom to make them always visible when you resize screen. Other way use this in media query.
– Amarjit Singh
Mar 7 at 9:00
add a comment |
2
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
1
@newcool you can make the button's rowposition:fixedto bottom to make them always visible when you resize screen. Other way use this in media query.
– Amarjit Singh
Mar 7 at 9:00
2
2
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
1
1
@newcool you can make the button's row
position:fixed to bottom to make them always visible when you resize screen. Other way use this in media query.– Amarjit Singh
Mar 7 at 9:00
@newcool you can make the button's row
position:fixed to bottom to make them always visible when you resize screen. Other way use this in media query.– Amarjit Singh
Mar 7 at 9:00
add a comment |
1 Answer
1
active
oldest
votes
Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable
animation-delay: 5s;
position:fixed;
bottom: 100px;
answered Mar 8 at 3:17
newcoolnewcool
235
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55037713%2fhow-do-i-make-my-website-buttons-shrink-with-the-screen-resolution%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable
animation-delay: 5s;
position:fixed;
bottom: 100px;
answered Mar 8 at 3:17
newcoolnewcool
235
add a comment |
Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable
animation-delay: 5s;
position:fixed;
bottom: 100px;
answered Mar 8 at 3:17
newcoolnewcool
235
add a comment |
Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable
animation-delay: 5s;
position:fixed;
bottom: 100px;
answered Mar 8 at 3:17
newcoolnewcool
235
Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable
animation-delay: 5s;
position:fixed;
bottom: 100px;
answered Mar 8 at 3:17
newcoolnewcool
235
answered Mar 8 at 3:17
newcoolnewcool
235
answered Mar 8 at 3:17
newcoolnewcool
235
answered Mar 8 at 3:17
newcoolnewcool
235
235
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55037713%2fhow-do-i-make-my-website-buttons-shrink-with-the-screen-resolution%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Have you tried using media queries to adjust the size of your main container as the screen size changes?
– Neill Herbst
Mar 7 at 7:09
1
@newcool you can make the button's row
position:fixedto bottom to make them always visible when you resize screen. Other way use this in media query.– Amarjit Singh
Mar 7 at 9:00