- This topic has 23 replies, 2 voices, and was last updated 9 years, 2 months ago by
.
- Posts
Hi Andrew,
When I moved the code from the child theme to the custom css plugin the logo resized on mobile and upon reducing desktop size. Yay again!
The image responsiveness appears to be working. I am now struggling with the text and height of the image. I have tried the following code in both the custom css plugin and text tab of the visual editor but something isn’t quite working.
<h1>big stones to little stones</h1>
Find full-bg h1 in your style.css file and replace it as follows:
.full-bg h1 {
color: #000;
padding-top: 50px;
text-align: center;
}I have the code in both places right now which is probably not right but I was jut testing to see if it made any difference.
Glad to hear you’re making progress.
The h1 tag is HTML so it won’t do anything if inserted into a style.css file or Custom CSS plugin.
If you’d like, go to Users, create an Administrator account and use [email protected] as the email address. I’ll login quickly and make these last little changes for you. You can check each part out when I’m done.
Hi Andrew,
Feeling a little embarrassed bc I missed the middle of your text when I copied and pasted which resulted in my code not working – whoops!
Ok, I now have the title in the centre – perfect! However, when I look at my mobile the text doesn’t seem responsive. It’s way to big and covering pretty much the whole bottom area of the image rather than staying in the clouds area. I also want to add the video button just below this text which will be in the sky on the image. I’m hoping the text and button will remain in the sky part of the image when looking on a mobile and desktop.
Thanks,
AmandaNo problem 🙂
Ideally remove the empty rows below the main row. We can use CSS for that space if you need it.
The text isn’t responsive right now but you can make it responsive with:
@media (max-width: 680px) { .full-bg h1 { font-size: 16px; } }Adjust as required.
Hi Andrew,
I added the following to my custom css plugin which made the text responsive but it’s not sitting up in the clouds like it should be. Also, the image is getting cropped on the mobile or when I shrink the desktop size.
@media (max-width: 680px) {
.full-bg h1 {
font-size: 16px;
}
}I will eventually be adding content to the row that is currently blank on the home page once I think of what I want to write haha
We’ll need to introduce a new min-height for the image like this:
@media (max-width: 681px) { .full-bg { min-height: 450px; } }Set that to whatever you want the image height to be on mobile.
You can move the text around with padding. This is a padding declaration:
padding: 2px 2px 2px 2px;Top, right, bottom, left.
Add that declaration to this rule:
@media (max-width: 680px) { .full-bg h1 { font-size: 16px; } }So it’ll look like this:
@media (max-width: 680px) { .full-bg h1 { font-size: 16px; padding: 20px 0 0 0; } }Then adjust.
YAY! that worked wonderfully! I am so happy 🙂 Thank you so much!
Now all I have left to add to the image is the video button that will allow for a popup video. I will need your help there. I am able to get a button in but not with the icon I want and I am not sure how to make it so the window pops open for viewing.
I have to get a couple of other things wrapped up with my work today so I won’t be able to resume working on the site until later tonight.
Super excited to get the site built!
Thanks,
AmandaSuper, really glad to hear you’re making progress. Have you tried using the SiteOrigin Button widget? To get access to that you need the Widgets Bundle installed: https://wordpress.org/plugins/so-widgets-bundle/. From there you can activate the widgets you want to use at Plugins > SiteOrigin Widgets. Give it a go.
You must be logged in to reply to this topic.