Buttons, Videos & Header

This topic contains 23 replies, has 2 voices, and was last updated by  Andrew Misplon 2 years, 10 months ago.

  • Author
    Posts
  • #2190

    Amanda
    Participant

    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.

    #2191

    Andrew Misplon
    Keymaster

    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 support@purothemes.com 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.

    #2192

    Amanda
    Participant

    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,
    Amanda

    #2193

    Andrew Misplon
    Keymaster

    No 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.

    #2194

    Andrew Misplon
    Keymaster

    You can adjust padding in that rule too.

    #2195

    Amanda
    Participant

    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

    #2196

    Andrew Misplon
    Keymaster

    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.

    #2197

    Amanda
    Participant

    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,
    Amanda

    #2198

    Andrew Misplon
    Keymaster

    Super, 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.

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

Scroll to top