Generate Theme 'Generate Box' customization

Community Forums Forums Design Tips and Tricks Generate Theme 'Generate Box' customization

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  SoZo 1 year, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #16707

    Nick Ellison
    Participant
    Post count: 12

    Hi. I have started to use the Generate theme here: http://www.nickellison.net

    As you can see I’ve changed the background of the generate box image. this is obviously one large image apposed to the generatebox-bg.png image that repeats.

    My question is, is there anyway to make this image mobile responsive?

    If not, is there a way I can have this image work on desktop/laptop, then revert back to a different mobile responsive image like the original when opened on mobile.

    Any help appreciated. If it requires coding could you spoon feed it please! :)

    Cheers

    Nick

    #16753

    SoZo
    Moderator
    Post count: 1573

    The best thing to do is apply a different background for each of the responsive sections. The only real way to make it scale would be to add “background-size: contain;”. You could try that but it never works out the way I want.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16843

    Nick Ellison
    Participant
    Post count: 12

    Hi. When you say ‘different background for each of the responsive sections’ what do you mean? Where are these different sections found? I just replaced generatebox-bg.png image.

    And where would I add “background-size: contain;” somewhere in the style.css file?

    Thanks

    Nick

    #16844

    SoZo
    Moderator
    Post count: 1573

    You’d add the background-size property to the rule you are trying to edit. The rule you applied the background image to.

    To add a different background you would need to add the same rule to each of the responsive sections at the bottom of the style sheet but with different backgrounds.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16845

    Nick Ellison
    Participant
    Post count: 12

    I just played around with the css file (bit of hit and hope) but it has resized, unfortunately like you said though doesn’t give the desired result. In the first scenario, is there a way to change the image that shows up on mobile instead of pulling in the main header image?

     

    #16854

    SoZo
    Moderator
    Post count: 1573

    Ya, you’d need to add #header rules to the responsive sections with your new background applied. Probably need to add “!important” after the values to override the custom header function.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16881

    Nick Ellison
    Participant
    Post count: 12

    Thanks for the info. It’s over my head unfortunately but I’ll pass it on to my man who can, it will make more sense to him :) Much appreciated.

    Nick

    #16898

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Generate Theme 'Generate Box' customization’ is closed to new replies.