We are having a slight issue with making text responsive on our homepage. Please see attached where you can see our details run off the screen. Ideally, we would like to keep the phone number on the same line too on phone screens.
Also is it possible to have out larger images not crop in so close on phone screens?
Please navigate to Salient > Typography > Responsive Settings and the click ON on the button then you can set all your font responsive settings from here.
I'm afraid the images have been set to view that way unless you change the padding and overflow settings on them using CSS.
We are not actually looking to reduce the size of the text header font, just to have sensible line breaks... ie: not cut the phone number in half or not let the email address run off the screen. (please see screen attached to first message in ticket)
Salient > Typography > Responsive Settings and the click ON on the button then you can set all your font responsive settings from here.
There is no option to amend the size of the ordinary body font? Just headings....
Any other ideas? The site is being launched tomorrow with massive campaign around it and this is the final thing to be sorted. Can you help us fix these last two items?
I didnt. I actually ended up changing the tagline to be that where it can be read on phone screens without a media query needed.
There is no option to amend the p style in the typography > responsive settings.
Can you please help us with the image crop on the homepage on phones? The CEO is going nuts as we were supposed to launch yesterday. All I am trying to do is apply a media query to make sure the images are all 100% viewable on phones with no cropping.
Yes thats correct as p tag is always set to standard 16 or 15px .
The Images issue cant be fixed . Though you seem to have created the layout incorrectly using Rows and Columns .
You need to use the "Portfolio VC Element" and choose Masonry Layout and then use "Custom Content Grid Item" Option here to add in the icon and text . Furthermore the Portfolio Projects can be linked to External urls as well .
Another option would be to resize all the columns on Mobile by adding a Extra Class in there first and then adjust the height like i have done for the below noting-hill column
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.notting-hill {
min-height: 336px !important;
/* or */
/* min-height: 100vw !important; */
}
}
Ok, that bring the images size down but they are repeating on the horizontal row, is there any way we can make them the 295px min height to fill the width of the screen?
I really appreciate this by the way, the SEO is on the warpath and I was the one who pushed for Salient.
Oh man. Thats an entire rebuild of the home page? The reason we went with the Colorful Blocks template was from advice I asked on the Comments about it.
She wants to have the rows broken up in the format they are and each has to have white space between them. Can this Full width masonry portfolio template do this?
My heart is sinking here knowing I got it this far and it will need to be redone. She is going to murder me.
Hi Guys,
We are having a slight issue with making text responsive on our homepage. Please see attached where you can see our details run off the screen. Ideally, we would like to keep the phone number on the same line too on phone screens.
Also is it possible to have out larger images not crop in so close on phone screens?
Jen
Hey there,
Thanks for reaching in,
Please navigate to Salient > Typography > Responsive Settings and the click ON on the button then you can set all your font responsive settings from here.
I'm afraid the images have been set to view that way unless you change the padding and overflow settings on them using CSS.
Hope this helps,
Regards
Hi Andrew,
Thanks for the speedy response.
We are not actually looking to reduce the size of the text header font, just to have sensible line breaks... ie: not cut the phone number in half or not let the email address run off the screen. (please see screen attached to first message in ticket)
Can you help us sort that out?
Hi Andrew,
Also on the images, could you provide me wit ha CSS snippet to tackel the overflow and padding on the images so they are not cropped on phone sceens?
Thank you
Jen
Hi Andrew,
Following the instructions you gave me:
Salient > Typography > Responsive Settings and the click ON on the button then you can set all your font responsive settings from here.
There is no option to amend the size of the ordinary body font? Just headings....
Any other ideas? The site is being launched tomorrow with massive campaign around it and this is the final thing to be sorted. Can you help us fix these last two items?
We are desperate at this stage.
Jen
Hey Again,
Sorry for the Delay .
I see you got it working : http://prntscr.com/hgr90p .
Best
ThemeNectar Support Team
I didnt. I actually ended up changing the tagline to be that where it can be read on phone screens without a media query needed.
There is no option to amend the p style in the typography > responsive settings.
Can you please help us with the image crop on the homepage on phones? The CEO is going nuts as we were supposed to launch yesterday. All I am trying to do is apply a media query to make sure the images are all 100% viewable on phones with no cropping.
Please help.
J
Hey Again,
Yes thats correct as p tag is always set to standard 16 or 15px .
The Images issue cant be fixed . Though you seem to have created the layout incorrectly using Rows and Columns .
You need to use the "Portfolio VC Element" and choose Masonry Layout and then use "Custom Content Grid Item" Option here to add in the icon and text . Furthermore the Portfolio Projects can be linked to External urls as well .
Be.st
ThemeNectar Support Team
1: See screenshot : http://prntscr.com/hgre50 .
2: Adjust the Portfolio Options from the Metabox : http://prntscr.com/hgrelk .
Be.st
ThemeNectar Support Team
Oh my god. We are over the finish line with the site and this was the last thing to be sorted.
Are you saying we cannot reduce the image size at all on the homepage? Why?
Do we have to rebuild the entire thing?
This is heartbreaking.
Hey Again,
Try this .
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) { .full-width-content.vc_row-fluid .wpb_column { background-position: center; background-size: contain; -moz-background-size: contain; -webkit-background-size: contain; min-height: auto !important; } }Thanks
ThemeNectar Support Team
Another option would be to resize all the columns on Mobile by adding a Extra Class in there first and then adjust the height like i have done for the below noting-hill column
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) { .notting-hill { min-height: 336px !important; /* or */ /* min-height: 100vw !important; */ } }Thanks
ThemeNectar Support Team
Hi Tahir,
Ok, that bring the images size down but they are repeating on the horizontal row, is there any way we can make them the 295px min height to fill the width of the screen?
I really appreciate this by the way, the SEO is on the warpath and I was the one who pushed for Salient.
J
Sorry hadnt seen you second solution there before replying, will try now.
This is a quick fix though . The Right way to create such a layout is by using the Portfolio VC element as mentioned earlier.
See this particular demo :http://themenectar.com/demo/salient-agency/full-width-masonry/ .
Best
ThemeNectar Support Team
Oh man. Thats an entire rebuild of the home page? The reason we went with the Colorful Blocks template was from advice I asked on the Comments about it.
She wants to have the rows broken up in the format they are and each has to have white space between them. Can this Full width masonry portfolio template do this?
My heart is sinking here knowing I got it this far and it will need to be redone. She is going to murder me.
J
Yes the Portfolio Element has a Item Spacing Element as well .
You dont need to redo if you get it to work correctly as per your client needs .
Be.st
ThemeNectar Support Team
Do you mean what we have already? You think thats possible?
Yes like i mentioned setting a min-height for the columns that have the image issue it can be fixed .
Be.st
ThemeNectar Support Team