Debut Theme-Mobile Header Resize Needed

Solved
breakingnewstee
Excursionist
12 0 0

The standard website looks good and everything is centered, but on the mobile and IPad site, the header is cut off.

How can I center it on the site? If you want to take a look, the site is

www.breakingnewstees.com 

0 Likes
PeanutButter
Shopify Partner
330 66 137

With the header, do you mean the hero image with the Cool.Candid.Conscious. title?

Screen Shot 2021-01-16 at 18.21.47.png

 

If this is the case, this is because all the title, as you have no spaces, it is one word.  You have several options:

1. Add spaces between the words so there can be a line-break
2. Make the size of the font of the title smaller
3. Use a CSS property which allows words to be cut into several lines (I would not recommend this as it can cut in any character)

Let me know what options you want and I will give you the code to add

This is how it looks with a smaller font:

Screen Shot 2021-01-16 at 18.26.19.png

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
breakingnewstee
Excursionist
12 0 0

Yes! What you are showing is perfect. That's how I want it to look on the phone.

0 Likes
breakingnewstee
Excursionist
12 0 0

I want to keep the spacing as is. If we make font smaller will it only apply to the mobile site? I don't want to change the standard website.

0 Likes
PeanutButter
Shopify Partner
330 66 137

I will send code to decrease font-size in phone only, give me a few minutes

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
breakingnewstee
Excursionist
12 0 0

Please advise where to insert it as well. Thank you!

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi there, add following code at the end of Assets/theme.scss.liquid file.
To edit files, go to Online store > Themes and in the Actions dropdown click on Edit Code

.hero__inner .mega-title--large {
  // This is size for smaller phones (320px screensize) like iphone 5
  font-size: em(24);
	
  // This is size for most of phone (375px screensize) like iphone >= 6
  @media only screen and (min-width: 375px) {
  	font-size: em(28);
  }
  
  // This is size for iPad (>768px)
  @include media-query($medium-up) {
    font-size: em(floor($font-size-header * 2));
  }
  
  // This is size for desktop
  @include media-query($large-up) {
    font-size: em(floor($font-size-header * 2.5));
  }
}


I have added several font sizes for different device sizes.  In my debut theme it looks pretty good.

Please remember to Like and mark as accepted my answer if it solves your request

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
breakingnewstee
Excursionist
12 0 0

Under assets. I see a theme.css tab, but there is no theme.css.liquid .

0 Likes
PeanutButter
Shopify Partner
330 66 137

ok, give me a sec then to adjust the code to css, code sent was scss

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 66 137

Add this at the end of theme.css:

.hero__inner .mega-title--large {
  // This is size for smaller phones (320px screensize) like iphone 5
  font-size: 1.5em;
	
  // This is size for most of phone (375px screensize) like iphone >= 6
  @media only screen and (min-width: 375px) {
  	font-size: 1.75em;
  }
  
  // This is size for iPad (>768px)
  @media only screen and (min-width: 750px) {
    font-size: 3.25em;
  }
  
  // This is size for desktop
  @media only screen and (min-width: 990px) {
    font-size: 4em;
  }
}
Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es