In reference to ticket 18023

StatusIDPriorityType
Closed18131HighSnapshop WP
Profile Reply
RetroDairyMart Client

Hi there,

Thank you for the first round of help with @media CSS for my h1 and h2 tags.  I went in and tried your suggested code and am familiar with making @media adjustments with responsive themes. However, after going in and trying to get the code to take just for the mobile phone portrait and landscape versions (as a primer/tester) – the code is still not taking. I’m not sure if my @media widths are off or if there are specific classes or ID’s for the sections that are having issue, google font wise.

I don’t think that is it though, because I do have the ID for one of the areas in there, for sure:

#fbuilder_wrapper h2 {
    font-family: “Grand Hotel” !important;
}

I know that I added those ‘Headline’ or ‘Header’ shortcodes to the page layout as a shortcode via the Front End builder. I know that the other google font option for the h3, h4, h5 and regular body text is loading the Lato font. I separated the regular CSS from the list of header selectors in my custom CSS panel to see if that would do the trick, but no. And I tried the adjustment to where I place the quotation marks (as suggested).

Here’s the code as it is now after making those adjustments and trying those things out. I’m wondering if I need to add something to the selectors for those specific sections/id’s (Custom Headline Shortcode). Or if it is something specific to the iPhone 5. I’ve searched forums as well for iPhone 5s and have made similar adjustments for responsive themes for other folks – and those methods are not working either.

Will you please take a look again and let me know what you think? Here’s the code: 

////////////////////////////////My CSS *Line/note not added to the Custom CSS editor, btw.

Hi there,

Thank you for the first round of help with @media CSS for my h1 and h2 tags.  I went in and tried your suggested code and am familiar with making @media adjustments with responsive themes. However, after going in and trying to get the code to take just for the mobile phone portrait and landscape versions (as a primer/tester) – the code is still not taking. I’m not sure if my @media widths are off or if there are specific classes or ID’s for the sections that are having issue, google font wise.

I don’t think that is it though, because I do have the ID for one of the areas in there, for sure:

#fbuilder_wrapper h2 {
    font-family: “Grand Hotel” !important;
}

I know that I added those ‘Headline’ or ‘Header’ shortcodes to the page layout as a shortcode via the Front End builder. I know that the other google font option for the h3, h4, h5 and regular body text is loading the Lato font. I separated the regular CSS from the list of header selectors in my custom CSS panel to see if that would do the trick, but no. And I tried the adjustment to where I place the quotation marks (as suggested).

Here’s the code as it is now after making those adjustments and trying those things out. I’m wondering if I need to add something to the selectors for those specific sections/id’s (Custom Headline Shortcode). Or if it is something specific to the iPhone 5. I’ve searched forums as well for iPhone 5s and have made similar adjustments for responsive themes for other folks – and those methods are not working either.

Will you please take a look again and let me know what you think?

#snpshpwp_content h1 {
  color: #9e2932 !important;
  font-family: “Grand Hotel” !important;
}

#fbuilder_wrapper h2 {
    font-family: “Grand Hotel” !important;
}

#snpshpwp_header .snpshpwp_header_bar a {
    color: #FFF;
    font-family: “Lato” !important;
}

#snpshpwp_footer {
  font-family: “Lato” !important;
}

.ghwhite {
  color: #ffffff !important;
}

.prodtitle {
  text-shadow: 1px 1px 0px #0c0c0c;
  color: #0c0c0c;
}

 
.snpshpwp_adesc, .snpshpwp_blog_comments {
    font-family: “Lato” !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;

#snpshpwp_content h3, #snpshpwp_content h4, #snpshpwp_content h5, #snpshpwp_content h6 {
    color: #222;
    font-family: “Lato” !important;
    font-style: normal;
    font-weight: 400;
}

@media screen and (max-width: 360px)
  and (-webkit-min-device-pixel-ratio: 2) {

  #snpshpwp_content h1 {
  color: #9e2932 !important;
  font-family: ”Grand Hotel” !important;
 }

  #fbuilder_wrapper h2 {
  font-family: ”Grand Hotel” !important;
  }

#snpshpwp_header .snpshpwp_header_bar a {
    color: #FFF;
    font-family: “Lato” !important;
 }

#snpshpwp_footer {
  font-family: “Lato” !important;
 }

.ghwhite {
  color: #ffffff !important;
 }

.prodtitle {
  text-shadow: 1px 1px 0px #0c0c0c;
  color: #0c0c0c;
 }

.snpshpwp_adesc, .snpshpwp_blog_comments {
    font-family: “Lato” !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
 } 

#snpshpwp_content h3, #snpshpwp_content h4, #snpshpwp_content h5, #snpshpwp_content h6 {
    color: #222;
    font-family: “Lato” !important;
    font-style: normal;
    font-weight: 400;
 }
}

Replies

User Description Posted On
RetroDairyMart Client

Bump.

RetroDairyMart Client

Still struggling with this.

Shindiri Support team Administrator

Hi,

We would be grateful if you could only make a list of request without this code because everything got mixed up and neither me or my colleague can figure out what you want to achieve.

  1.   Request 1
  2.   Request 2
  3.   Request 3..

Thank you

Best regards,
Shindiri Studio | http://www.shindiristudio.com/

RetroDairyMart Client

Hi there,

Request 1:

I would like my google font choice "Grand Hotel" for my H1 and H2 tags to load when viewing on the iPhone 5. It is not. The suggested @media code as well as the adjustments I tried are not taking. The other Google Font choices I set via Theme Options are taking (Lato) for the body, text, footer, and h3, h4, h5, h6 tags. And the H1 and H2 font choice (Grand Hotel) are showing up when viewing the responsive layouts via Firebug as well as when I resize the dimensions when in the Front End editor. I don't know what I'm doing wrong. Normally, I can figure it out.

That's all. Thank you.

Bryan


RetroDairyMart Client

Oh, and the site is now at the primary url:  http://retrodairymart.com


Shindiri Support team Administrator

Hi,

We did get again to your web site to check it.

Everythings is working now, if you did fixed the issue send as an email on support@shindiristudio.com.
Best regards,
Shindiri Studio | http://www.shindiristudio.com/

 

 

× This ticket is closed.