[halfiranianParticipant]

Hello,

here is my link: http://playxtest.wpengine.com/

I am trying to decrease the font size for h1, h2 and the blockquotes for mobile only. I am using a custom font called Trade Gothic which I activated through the plug-in Use Any Font.

I look into the older forum posts and I found this but it did not work for me:
@media (max-width: 480px)
.entry-title {
font-size: 5%;
}

Would appreciate the help. I am a total beginner.

[Rue NelModerator]

Hello There,

Thanks for writing in! To decrease the font size of the heading tags for mobile only, you can use this code instead:

@media (max-width: 480px)
  h1, .h1 {
    font-size: 30px;
  }

  h2, .h2 {
    font-size: 95%;
  }

  h3, .h3 {
    font-size: 95%;
  }
}

This code will only affect smaller screen which is 480 pixels or smaller. If you want to start from iPad portrait, you can use this:

@media (max-width: 767px)
  h1, .h1 {
    font-size: 30px;
  }

  h2, .h2 {
    font-size: 95%;
  }

  h3, .h3 {
    font-size: 95%;
  }
}

Please let us know if this works out for you.

[halfiranianParticipant]

Thank you for your prompt response. I was not sure where to insert that code so I put it in Customizer > Cusom > CSS but nothing happened. Also what about the blockquotes? Basically what I need is for the headings and blockquotes to appear smaller (with probably no padding) on smaller screens, because right now on mobile I have super tight awkward looking columns (for blockquotes) and huge headers.

I am working in Cornerstone.

[ThaiModerator]

Hi There,

Please try adding the following CSS under Customizer > Cusom > CSS:

@media (max-width: 480px){
    blockquote.x-blockquote {
        padding: 0 !important;
    }
}

Hope it helps 🙂

[halfiranianParticipant]

Thanks for this! With your help, I managed to re-size the blockquotes and remove the padding on them for mobile only.
There seems to be quite a few elements that I need to adjust for mobile use only. May I please ask you to help me with the following:

1) I was able to reduce the font size of the custom headline in my “Introduction” section by using this code:

@media (max-width: 767px)
  h1, .h1 {
    font-size: 30px;
  }
}

But when add h2 to the code, it doesn’t work:

@media (max-width: 960px){
  h1, .h1 {
    font-size: 40px;
  }
  h2, .h2 {
    font-size: 25px;
  }
}

The h2 custom headlines that I want to re-size for mobile are in sections “Civilians”, “Children”, “Women”, “Torture”, “Media” and “Medics”.

2) I need to re-size (enlarge) the logo for mobile only. I don’t know how to target specific elements.

3) I need to re-size (reduce) the images of the quotation marks for mobile only. I don’t know how to target specific elements.

4) I changed the font size of the 2 text boxes in the “Introduction” section, for mobile only. Since I do not know how to target specific elements for custom CSS, I put in “custom-class” in the CLASS of the text boxes and this code in the Custom CSS:

@media (max-width: 960px){
    .custom-class {
        padding: 0 !important; 
        font-size: 0.7em;
    }
} 

It worked but is it a correct way of doing it? Please let me know if there is a cleaner way to avoid unexpected issues.

5) I need to change the font size of the text box in “Section 15”. Do I create another class like I mentioned above in bullet #4 or can you recommend a better way?

6) Social icons in “Section 16”: Since I have to work with columns in Cornerstone, the only way I could find to place the two social icons side by side is to create two columns in the respected row, place one icon in each column and add 40% LEFT PADDING to the Twitter icon. But it looks weird on mobile (Facebook icon gets pushed down).

Thanks in advance!

[ChristianModerator]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[halfiranianParticipant]

Sure. Can you at least tell me how to target a specific element (i.e: an image) and why the h2 code isn’t working here:

@media (max-width: 960px){
  h1, .h1 {
    font-size: 40px;
  }
  h2, .h2 {
    font-size: 25px;
  }
}

[RupokMember]

Hi there,

Thanks for updating. You can add a custom class in the class field to select an element easily. Your code seems fine and should work if any other CSS doesn’t override this. So make sure you don’t have any conflicting CSS for the same element. You can also use !important tag :

@media (max-width: 960px){
  h1, .h1 {
    font-size: 40px;
  }
  h2, .h2 {
    font-size: 25px!important;
  }
}

Hope this helps.

Cheers!

[halfiranianParticipant]

That helped, thank you!

I cannot figure out how to properly position the logo and have it resize with mobile screen. Right now, the image of the logo is placed within the first row in my first section. In order for it to be showing on the top right corner of the screen, I added PADDING 0px 0px 0px 30% to the column and PADDING 0px 0px 0px 40% to the row. Is that the right way of doing it?

On mobile, the logo size is huge.

[ChristopherModerator]

Hi there,

Instead of adding padding to row and column, add float: right; in image’s style field.

To resize the image for mobile, add this :

@media (max-width:480px){
div#x-section-1 img {
    width: 5%;
}
}

Hope it helps.

[halfiranianParticipant]

That works great, thank you!

So I applied the same code (float: right;) to the style field of the Twitter icon in my final section (section 16).
Looks fine on desktop but on mobile the icons seem to switch places and there is a big gap in between them.

Can you please show me how to resolve that?

Also, if I want to reduce their size for mobile only, should I apply the same code you used in your above post?

@media (max-width:480px){
div#x-section-1 img {
    width: 5%;
}
}

Do I replace “x-section-1” with “x-section-16” and “img” with “icon” ?

[ChristopherModerator]

Hi there,

Please add both icons in the same column. No need to divide the section into multiple columns.

Try this code :

@media (max-width:480px){
i.x-icon.x-icon-facebook-square, i.x-icon.x-icon-twitter-square {
    font-size: 15px !important;
}
}

Hope it helps.

[halfiranianParticipant]

Hello,

When I add both icon elements into one column, they are automatically placed one over the other (see screenshot attached). How can I place them side by side? Also the code didn’t change anything.

[RupokMember]

Hi there,

Thanks for writing back. You can place pull-left on the class field for the icon elements. If you need spacing on right, you can add margin-right: 10px; on the Style field.

Hope this makes sense.

Cheers!

[halfiranianParticipant]

Thank you. Makes sense but nothing happened. So here’s what I have:

1) 1 column in Section 16 with two icon elements, each with a pull-left in their respected class field.
This did not do anything. The icons are to the left of the page, they need to be centered.

2) The Twitter icon only has a margin-right: 10px in its Style field. This worked to create a gap in between the icons.

3) This custom CSS in Customizer:

@media (max-width:960px){
i.x-icon.x-icon-facebook-square, i.x-icon.x-icon-twitter-square {
    font-size: 110% !important;
}
}

This worked to resize the icons for mobile only.

Can you please tell me how I can get both icons to be centered on the page?

[Author]

Posts