Font-size responsive on query-selector
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
jquery-selectors font-size
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
add a comment |
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
jquery-selectors font-size
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
add a comment |
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
jquery-selectors font-size
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
jquery-selectors font-size
jquery-selectors font-size
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
asked Nov 14 '18 at 16:04
Stegnat SumStegnat Sum
374
374
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
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%2f53304307%2ffont-size-responsive-on-query-selector%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
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
add a comment |
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
add a comment |
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>.et_pb_text_2, .et_pb_text_5
display: inline-block;
@media only screen and (min-width: 1024px)
.et_pb_text_2 h3
font-size: 60px;
.et_pb_text_5 h3
font-size: 60px;
@media only screen and (max-width: 1023px)
.et_pb_text_2 h3
font-size: 4vw!important;
.et_pb_text_5 h3
font-size: 4vw!important;
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
answered Nov 17 '18 at 11:27
Shashank BhattShashank Bhatt
107117
107117
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
add a comment |
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
the website is at seniorlivingmedia.com. And the headings are on the front page, in the yellow then white containers. It is really strange.
– Stegnat Sum
Nov 17 '18 at 14:06
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%2f53304307%2ffont-size-responsive-on-query-selector%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
