Hero Text Size

Solved
tomm1p
Excursionist
27 0 4

Hi!

 

On the page I try to change the size of the text  on iPad (768px) as in the picture. The problem is that only the size of the center text changes. The top and bottom of the text, however, remain the same.

 

Screenshot_4.png

 

Current code:

/* Custom CSS Code - iPad */

@media (max-width:768px){
	.hero__title p {
		font-size:60px !important;
	}
}
   
    
@media (max-width:768px){
	.hero__link a{
		font-size: 25px !important;
	}
}

 

I tried this code, but nothing changed:

/* Custom CSS Code - iPad */

@media (max-width:768px){
	.hero__top-subtitle p {
		font-size:80px !important;
	}
}
    
@media (max-width:768px){
	.hero__title p {
		font-size:60px !important;
	}
}
    
@media (max-width:768px){
	.hero__subtitle p {
		font-size:60px !important;
	}
}
   
    
@media (max-width:768px){
	.hero__link a{
		font-size: 25px !important;
	}
}

 

What could be wrong?

 

Greetings,

Tomas

Accepted Solution (1)

Accepted Solutions
hawkscode
Shopify Partner
52 12 10

This is an accepted solution.

Hi @tomm1p 

for other device you can change size 

@media (max-width:600px){
	.hero__title p {
		font-size:30px !important;
	} 

	.hero__subtitle  {
		font-size:30px !important;
	}
	.hero__link a{
		font-size: 15px !important;
	}
}

If helpful, please Like and Accept Solution

if you Want to Modify / Customize your theme , Feel free to contact me

Email : vikash.hawkscode@gmail.com


Skype : vikas.hawkscode


www.hawkscode.com

View solution in original post

Replies 6 (6)
hawkscode
Shopify Partner
52 12 10

Hi 

@tomm1p  can you share your store url

If helpful, please Like and Accept Solution

if you Want to Modify / Customize your theme , Feel free to contact me

Email : vikash.hawkscode@gmail.com


Skype : vikas.hawkscode


www.hawkscode.com

tomm1p
Excursionist
27 0 4
hawkscode
Shopify Partner
52 12 10

hi @tomm1p 

remove other media max 768 for heros text

use it 

.hero__subtitle {
    /* font-size: 18px; */
}

@media (max-width:768px){
	.hero__title p {
		font-size:60px !important;
	} 

	.hero__subtitle  {
		font-size:60px !important;
	}
	.hero__link a{
		font-size: 25px !important;
	}
}
   

If helpful, please Like and Accept Solution

if you Want to Modify / Customize your theme , Feel free to contact me

Email : vikash.hawkscode@gmail.com


Skype : vikas.hawkscode


www.hawkscode.com

tomm1p
Excursionist
27 0 4

@hawkscode But then will my size change on other devices as well? I would like to specify a specific width of this caption for a specific screen width.

hawkscode
Shopify Partner
52 12 10

This is an accepted solution.

Hi @tomm1p 

for other device you can change size 

@media (max-width:600px){
	.hero__title p {
		font-size:30px !important;
	} 

	.hero__subtitle  {
		font-size:30px !important;
	}
	.hero__link a{
		font-size: 15px !important;
	}
}

If helpful, please Like and Accept Solution

if you Want to Modify / Customize your theme , Feel free to contact me

Email : vikash.hawkscode@gmail.com


Skype : vikas.hawkscode


www.hawkscode.com

View solution in original post

tomm1p
Excursionist
27 0 4

@hawkscode 

/* Custom CSS Code - iPad */

@media (max-width:768px){
	.hero__top-subtitle {
		font-size:27px !important;
	}
}
    
@media (max-width:768px){
	.hero__title p {
		font-size:60px !important;
      	margin-top: 1em !important;
  		display: block !important;
	}
}
    
@media (max-width:768px){
	.hero__subtitle {
		font-size:30px !important;
      	margin-top: 1em !important;
  		display: block !important;
      	margin-bottom: 1em !important;
  		display: block !important;
	}
}
   
    
@media (max-width:768px){
	.hero__link a{
		font-size: 30px !important;
	}
}


    
/* Custom CSS Code - max 760px  */ 

@media (max-width:760px){
	.hero__top-subtitle {
		font-size:18px !important;
	}
}
    
@media (max-width:760px){
	.hero__title p {
		font-size:30px !important;
	}
}
    
@media (max-width:760px){
	.hero__subtitle {
		font-size:20px !important;
	}
}
   
    
@media (max-width:760px){
	.hero__link a{
		font-size: 15px !important;
	}