Adding color to what appears as transparent font

Support
#20

Hi Lyndsay,

Please add this to Theme Options > CSS

.tco-subscribe-form input[type="email"],
.tco-subscribe-form input[type="submit"] {
	border-radius: 0.25em;
    margin-top: 0;
    margin-bottom: 0;
    height: 3em;
    box-shadow: none;
}

That will make the button and email field same height.

The issue on your mobile view is because you applied to much padding on the column.



Set that to 2em only, and use the ROW’s max-width option instead if you want to narrow column width.



Hope it helps,
Cheers!

#21

Thanks! That fixed the buttons!

I’m not sure why, but I can’t locate the screen you have sent above to adjust the Row’s max-width option. I went in and reset the column padding to 2px on Left and Right. Is this right? How can I get to the screen you have sent above?

Thanks again!

#22

Still having issues with the background image as well…it’s not fitting on the screen the right way and half goes missing on mobile device.

Thanks!

#23

Hi Lyndsay,

  1. To go to Row settings, you can go to layout, select the section and row then clcik on magnifying glass.

  1. You can adjust it by adding an ID to your section.

Then add this in Theme Options > CSS

@media(max-width:767px) {
   .my-section {
          background-size: 80%;
          background-position: 50% 50%; 
   }
}

Change 80% and 50% to adjust

For your reference:

https://www.w3schools.com/cssref/pr_background-position.asp
https://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope that helps

#24

Sorry, this didn’t work for me. My screen doesn’t seem to have that as an option for the row size.

My current outstanding issues to get my page running are as follows -

1)Background image isn’t properly fitting. (There also appears to be another background image that I had up before that keeps reappearing and I don’t know where it is located.)

2)Font needs to be shifted over so not to cover the left side of the image with the person.

3)I need my homepage to properly transfer to mobile/smaller devices.

Are you able to assist?

Thank you!

#25

Hi Lyndsay,

Please turn on advanced option under Settings > Preferences then follow the instructions provided above.

If you are still having a problem after that, kindly provide us your wordpress admin login in Secure Note(key icon)

Thanks

#26

Hi - I sent my Username/Pass in secure note.

  1. Homepage - on a laptop/computer size screen the background image doesn’t fit properly.

  2. Homepage - there is some odd space at the bottom of the screen.

  3. None of my homepage is translating well to smaller screen/mostly mobile devices.

Are you able to assist with these 3?

Thank you.

#27

Hi Lyndsay,

I did go ahead and fixed those issues, the background image is responsive in a different way, what we can only do is to position your background properly. Please read this thread for more details about background-position.

Hope it helps,
Cheers!

#28

Thank you!! This made a world of a difference!!

Getting down to perfection type details to get this up and running, here’s what I’m seeing…

On a large computer screen -
Just the bottom of the image/rocks is cut off - can the full image be seen here? (It’s all visible for all other devices…iPad/phone etc)

On a mobile device -
1)The email address entry box - where it says “email address” doesn’t appear centered inside the white box. Since the box sits right above the ‘subscribe’ box it would be great if they were aligned.
2)The bottom line gets lost in the ‘rocks’ instead of being high up enough to be read in the ‘sky’. On every other device all the font is above this portion of the image so it can all be read clearly.

Are you able to assist with these final corrections? Thank you again!

#29

Hi There,

Please add this to Theme Options > CSS

.tco-subscribe-form input[type="email"], .tco-subscribe-form input[type="submit"] {
	text-align: center !important;
}

The only text I am seeing getting to the “rocks” is the No Charge. No Spam. Unsubscribe Anytime. which is understandable because its already in the bottom. Perhaps please apply an opaque background-color on that text so it can be more readable.



You can make that fit to your screen size by adjusting the background-position, but keep in mind that there is no one setting fits all screen for background-image. some area will be cut when viewed on different screen-size.

More details here

Thanks,

#30

Thanks! This helped to fix the alignment of the ‘Email Address’ text in the box!

When I opened your link to the ‘background-position’ you have highlighted above it tells me to adjust those settings in a screen that looks like this…but I don’t have that screen. Is that the pro version? or how do I get to that? I’d like as much of the image to be seen on each screen as possible. Would this work better if I had a different image from the start? I don’t understand why it wouldn’t just shrink down based on screen size but fit no matter the viewing method?

#31

I’ll include my username/pass again in secure note if that helps…

thanks again!!

#32

Hello Lyndsay,

The setting we have shown in the screenshot is only available in “Advance Mode”. Please go to X > Settings > Permissions > User Preferences > Advance Mode and set it to “Always On”.

Go back to Cornerstone editing screen, reload the page and you’ll see more options in the section settings.

We would loved to know if this has work for you. Thank you.

#33

I updated that, thanks! It unfortunately is still not providing that same screen option for the background image. I’m now able to play with the padding and such for the text boxes to help adjust the alignment.

My only issue now is the background image still. Can you please help to adjust this or explain why nothing is working? I’d like to see the full image no matter the screen. I don’t understand how this could not be possible?

Thank you,

#34

Hello Lyndsay,

You have set the background image as cover. The percentage position will not work. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the size cover by default which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use the size 100% 100% which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use the size 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use the size contain but then this is not a good choice because you will see white spaces around your image.

The position could be top, left, right, center. and bottom. Percentage position may work too provided that you have set the size to auto.
https://www.w3schools.com/cssref/pr_background-position.asp

Hope this helps.

#35

I understand and it seems my best bet may be to try and find a different image to use that will fit in its entirety on the desktop version. I may be able to create a work around for the other devices (tablet/mobile) by setting different images that will work better for those screen sizes and ‘hiding’ them from view based on the screen type.

-What size image would you recommend using that will fit entirely inside the desktop view - above the fold so no scrolling will be necessary?

I’ve got a few other questions related to the blog post page for styling -

  1. On the blog page is it possible to make the title of the blog a hyperlink blue color so that it is clear it is to be clicked on? if so, how can I change this?

  2. Is it possible to add thumbnail images next to the article clips/titles on the blog page? If so, how?

3)When you click on the article and enter the post, I’d like the article title to be centered. How can I adjust that?

4)Where is the best place to add a background image to the main blog page if I decide I want one?

thank you!

#36

Hi There,

The 1200x500px should be good for the size of image.

Please add this custom CSS:

h2.entry-title a {
    color: #3a3af3 !important;
}

When you edit your posts, you will see the featured image option on the right hand side:

Please add this custom CSS:

h1.entry-title {
     text-align: center;
}

To add a background image to your blog page, please edit your blog then scroll to the background option then set the background image:

Hope it helps :slight_smile:

#37

Hi,

  1. I tried to change the home page image size to 1200x500px but it wouldn’t let me scale it that way, the 500px wouldn’t go below 900? Are there any other settings or code I could enter to have the entire picture i’m using sit above the fold so a visitor wouldn’t have to scroll on the page?

  2. What is the preferred image size for a mobile device to properly fit on the screen?

  3. I followed your instruction to add the thumbnail/featured image. It worked but once again one of the image sizes isn’t sitting well. Any tips to get a standard responsive size to fit what ever image I’m using into a smaller/thumbnail size?

  4. Adding the featured image, also changed the actual post/article. It now has the large image at the top of the article above the title. Is there a way to remove that within the post? I have the images inserted into the article where I want them and don’t want them posted in the same blog post 2x.

  5. Thank you!! The CSS code for changing blog page title color and centering the title in the actual article worked well!!

Thank you again, I greatly appreciate the continued support.

#38

Hey Lyndsay,

For questions 1, 2 and 3, please watch my screencast at https://youtu.be/iN3DYFKghSI

For question 4, please add this code in Theme Options > CSS.

.single-post .entry-featured {
    display:none;
}

I would just kindly ask to not mix topics in a single thread because that usually causes confusion not just for us but to other users as well who encounters the same problem. It also slows us down because we need to read everything including the questions that has already been answered thus increasing our response time which is generally not good both for you and for us.

I hope you understand and hope my explanation helps.

#39

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.