using CSS to change image size and font size at the top menu

nettynat · Member · Apr 21, 2017 at 8:13 pm
Copy link

Add topic to favorites
Hi there!
I would like to do four modifications with my site layout (footcareforall.com)
1.On my home page there is a picture, which got cropped from the original size
Please, let me know how to make this picture displayed in the original size (not cropped)
I know that my theme (Responsive) is set to hard crop the image to be 440 wide x 300 tall pixel size.
I scaled down original image, but it is still cropped the same way on the page.
2. How to increase font size for the Menu Items on the menu bar and to change their font?
3. How to use fancy Fonts (more artistic) for the titles of the pages.
4. How to display phone number with the phone icon above menu bar to the right of the Site Title

Thanks,
Andrei

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Apr 22, 2017 at 10:52 am
Copy link
Hello @nettynat,

1.On my home page there is a picture, which got cropped from the original size
Please, let me know how to make this picture displayed in the original size (not cropped)
I know that my theme (Responsive) is set to hard crop the image to be 440 wide x 300 tall pixel size.

Are you taking about this image? It does not seemed cropped. The original side of the image is 440 x 300. Can you please explain which image are you talking about?

2. How to increase font size for the Menu Items on the menu bar and to change their font?

Use this CSS code to change the font size of the menu text’s:
```
.menu a {
    font-size: 20px;
}
```
You can change the font style of the menu from the Fonts options(Base Font) of the site customizer.

3. How to use fancy Fonts (more artistic) for the titles of the pages.

Open the site customizer, go to Fonts and select a fancy font from the Headings dropdown.

4. How to display phone number with the phone icon above menu bar to the right of the Site Title

To use icons, it must be already present as a feature on your theme but it does not seem to have it. So what you can do is use a unicode phone symbol or an emoji to display the phone icon, but there’s no guarantee that it will work on all browsers.

Use this CSS to display the phone number with the unicode icon to the right of the title:
i. First add relative positioning to the menu wrapper:
```
.menu-menu-container {
    position: relative;
}
```
ii. Then, use this code to add the phone number:
```
#menu-menu-1:before {
    content: '📞 +1234567890';  /*edit this value with your phone number*/
    position: absolute;
    right: 0;
    top: 85px;
    font-size: 18px;
}
```
OR THIS CODE:(icon changed)
```
#menu-menu-1:before {
    content: '✆ +1234567890';  /*edit this value with your phone number*/
    position: absolute;
    right: 0;
    top: 85px;
    font-size: 18px;
}
```
Hope this helps 🙂
nettynat · Member · Apr 23, 2017 at 9:22 am
Copy link
Hello @otpidusprime,

Thank you very much for you answers.

I have a few additional questions.
1. Picture cropping.
Original picture that I uploaded to the website is different from the picture displayed on the home page (nurse’s hair and sleeper got removed)
Please, let me know how to add link to my original picture to this
comment, so you can see it.
2. When I selected the font from the Headings drop down list,
besides page title it changed font of the site title as well.
Please, let me know whether it is possible to change Fonts of the pages titles only, and after that assign different Font for the
site title.

Thanks,
Andrei
otpidusprime · Member · Apr 23, 2017 at 10:29 am
Copy link
1. Picture cropping.
Original picture that I uploaded to the website is different from the picture displayed on the home page (nurse’s hair and sleeper got removed)
Please, let me know how to add link to my original picture to this
comment, so you can see it.

When you upload/add a picture, WordPress sometimes asks you to crop it, make sure you adjust the cropping windows to show the entire image while uploading it.

2. When I selected the font from the Headings drop down list,
besides page title it changed font of the site title as well.
Please, let me know whether it is possible to change Fonts of the pages titles only, and after that assign different Font for the
site title.

Yes because the site title is a part of the heading as well. Not only site title, you post/page-titles are also changes when you change the font from the Headings dropdown.
You can use CSS, to change the font of the page title’s:
```
.post-title {
    font-family: 'Cherry Swash';
}
```
make sure you change ‘Cherry Swash’ to a font style that are already available on WordPress.COM. Because importing custom fonts from external sources is not allowed on WordPress.COM. But i am not sure that this will work either(thats the reason why i suggested you to use the site customizer to change fonts), you can try tho. 🙂
nettynat · Member · Apr 24, 2017 at 10:40 pm
Copy link
Hi @otpidusprime,
Thank you very much for the answers.
I have one more question.
When user will go to the “Contact” page of the my website “footcareforall.com”,
he will see default values in the contact form:
“nettynat” in the “Name” textbox
and
“(email visible only to moderators and staff)” in the Email textbox.
Please let me know how to make these text boxes empty (without any default values)
Thanks,
Andrei
otpidusprime · Member · Apr 25, 2017 at 2:33 pm
Copy link
@nettynat
That happens when a visitor is logged in to his/her WordPress.COM account. It won’t be visible when someone is logged in. And also, each user will see his username/name and email ID inside the form field and not yours.

So don’t worry about it. 🙂

To confirm you can check the page in incognito/private mode of your browser.
nettynat · Member · Apr 25, 2017 at 3:16 pm
Copy link
Hello @otpidusprime,

Thank you very much for your help!

Andrei
otpidusprime · Member · Apr 25, 2017 at 3:21 pm
Copy link
You’re welcome Andrei 🙂

No items found.