<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Button Sizing</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
/>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
style
>
@media screen and (max-width: 39.9375em) {
.button.small-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.button.medium-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 63.9375em) {
.button.medium-down-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media print, screen and (min-width: 40em) {
.button.medium-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
.button.large-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 74.9375em) {
.button.large-down-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media print, screen and (min-width: 64em) {
.button.large-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
</
style
>
</
head
>
<
body
class="grid-x align-middle
align-center grid-container"
style
=
"height: 95vh; width: 95vw"
>
<
div
>
<
h2
style
=
"color: green"
>GeekforGeeks</
h2
>
<
h4
>Foundation CSS Button Sizing</
h4
>
<
a
class
=
"button small-only-expanded"
href
=
"#"
>
Expands only on small screens
</
a
>
<
a
class
=
"button medium-only-expanded"
href
=
"#"
>
Expands only on medium screens
</
a
>
<
a
class
=
"button large-only-expanded"
href
=
"#"
>
Expands only on large screens
</
a
>
<
a
class
=
"button medium-expanded"
href
=
"#"
>
Expands on medium and larger screens
</
a
>
<
a
class
=
"button large-expanded"
href
=
"#"
>
Expands on large and larger screens
</
a
>
<
a
class
=
"button medium-down-expanded"
href
=
"#"
>
Expands on medium and smaller screens
</
a
>
<
a
class
=
"button large-down-expanded"
href
=
"#"
>
Expands on large and smaller screens
</
a
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
});
</
script
>
</
body
>
</
html
>