Want to add the Media Queries for H1 in main page

[beyond_the_dream]

						<!-- Carousel Slide 1 -->
						<div class="position-relative pt-5" style="background-image: url(img/demos/business-consulting/slides/slide-1.jpg); background-size: cover; background-position: center; height: 100vh;">
							<div class="container position-relative z-index-3 pb-5 h-100">
								<div class="row align-items-center pb-5 h-100">
									<div class="col">
										<h1  class="custom-secondary-font text-color-light font-weight-extra-bold text-8 line-height-1 line-height-sm-3 mb-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}"><span class="custom-secondary-font text-4-5"><strong>에스넷의 제조데이터 서비스 플랫폼 "ZEZO"</strong><br></span><strong>차별화된 TCO절감 및 디지털 전환에 대한 해답을 제시해드리겠습니다.</strong></h1>
										<a href=""ZEZO_service.html"">서비스 신청하러 가기</a>
									</div>
								</div>
							</div>
						</div>

I want to change H1 part(strong text) on @media

@media (max-width: 441px) {
	 {
			font-size: 1px;
	}
}

like this.

but I don’t know which selector that I can use and which css file I need to add these Media Queries.

Please help!

---

Template Version: newest

[Support]

Hello, thanks for your purchase.

First you need add a custom class on the h1:

<h1 class="my-custom-h1 custom-secondary-font text-color-light font-weight-extra-bold text-8 line-height-1 line-height-sm-3 mb-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}"><span class="custom-secondary-font text-4-5"><strong>에스넷의 제조데이터 서비스 플랫폼 "ZEZO"</strong><br></span><strong>차별화된 TCO절감 및 디지털 전환에 대한 해답을 제시해드리겠습니다.</strong></h1>

* Note my-custom-h1.

Then change the CSS code to:

@media (max-width: 441px) {
	.my-custom-h1 {
		font-size: 1px !important;
	}
}

Another way to change font/text size between screen sizes, is trough the built-in classes of Porto. Example:

<p class="text-1 text-sm-2 text-md-3 text-lg-4 text-xl-5">Lorem ipsum</p>

* This way you will have different font size for each screen size.
* Possible values for text class starts from text-1 until text-15.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts