[Resolved] Background image, sections on mobile

Home Forums Support Background image, sections on mobile

Viewing 15 posts - 1 through 15 (of 35 total)
  • Author
    Posts
  • #124151
    David

    Hi

    Brought generatepress the other day, i like the options and at present just playing around with those options.

    My client wants a nice ‘sexy’ website (his words lol) the importnat bit is it has to also be mobile.

    And mobile is where i’ve hit a problem πŸ™

    I’m using sections
    Section #1
    Box type: Fluid
    Inner box type: Dluid
    Top paading: 50
    Bottom padding: 350
    Background image: (yes)
    Parallax effect: enabled

    Demo page at: http://opclinic.users40.interdns.co.uk/?page_id=52

    The issue:
    Viewing on a mobile device in portrait view the above image is not centered (left align) and therefore looks a little rubbish πŸ™

    I’ve seen a few posts but thought best to start a fresh one as some were older etc, Some said about detecting browser/device and forcing a background but wasn’t sure if this was a page background or section background.

    Hope you can advise πŸ™‚

    #124209
    Tom
    Lead Developer
    Lead Developer

    Hi David,

    Mobile can be a pain when it comes to background images because of aspect ratio.

    I’m probably going to add options to add a mobile image as well in the future.

    For now, you’ll have to use some custom CSS.

    In Sections, you’ll see a “Custom Classes” field – in there, add a class like: custom-mobile-bg

    Then you can do something like this:

    @media (max-width: 768px) {
          .custom-mobile-bg {
                background-image: url('URL TO MOBILE IMAGE');
          }
    }

    That should do it πŸ™‚

    #124278
    David

    Hi Tom

    where abouts do i add this code?


    @media
    (max-width: 768px) {
    .custom-mobile-bg {
    background-image: url(‘http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png’);
    }
    }

    If is style.css, under which section? (i’ve tried but the image doesn’t display)

    #124319
    Tom
    Lead Developer
    Lead Developer
    #124325
    David

    Hi, had a look at that earlier.

    Ran into a problem on the 1st “upload it through β€œAppearance > Themes > Upload” – then activate it.” -couldn’t see an ‘upload’ option/button/link ??

    Tried the 3rd option but not compatible with the current WP version.

    I’m by far NOT an expert in CSS formatting. if i was to have a blank one would it look like this?


    @media
    (max-width: 768px) {
    .custom-mobile-bg {
    background-image: url(β€˜http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png’);
    }
    }

    Not sure if enough { } or to many? and url(‘http.. or url(http.. ??

    It is rather frustrating.. πŸ™

    #124326
    Tom
    Lead Developer
    Lead Developer

    Sorry for the frustration! Realized I was missing a step in there – fixed it.

    When you go to “Appearance > Themes”, you should see an “Add New” button near the top – click that.

    Now you should see an “Upload” button in the same place.

    CSS looks good – here it is cleaned up a bit:

    @media (max-width: 768px) {
          .custom-mobile-bg {
                background-image: url('http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png');
          }
    }
    #124341
    David

    Nope, still not working – really no idea why neither πŸ™

    On the demo page http://opclinic.users40.interdns.co.uk/?page_id=52 i have two sections, section one has an background image and the custom class (custom-mobile-bg), section has no background but has the custom class (custom-mobile-bg)

    If pasted some text into both sections just incase this was the issue, also used a different background image so i can see a difference on a mobile.

    Could i ask you to take a look and see if you can see anything glaringly obvious? πŸ™‚

    #124395
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (max-width: 768px) {
          .custom-mobile-bg {
                background-image: url('http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png') !important;
          }
    }

    Also, you’ll only want to add the custom-mobile-bg class to the section where you want the mobile background image to show up.

    #124399
    David

    YES – !important works πŸ™‚

    However, image is too big (height/width) and seems pixelated.

    What size image you suggest? to look ok in portrait and landscape view?

    #124400
    Tom
    Lead Developer
    Lead Developer

    Really depends on the size of the area/aspect ratio as you resize.

    Might just take some playing around – I like to take a screenshot of the browser resized to the right width and then use Photoshop to place my photo over top – doing that should get you pretty close.

    #124403
    David

    nothing is simple, eh!

    What does @media (max-width: 768px) { do? If the screen size is above 768px then it displays the desktop version?

    As for the size, is it only the width that is important? One image i used it seemed to repeat it, could i of changed some main settings via customizer?

    #124405
    Tom
    Lead Developer
    Lead Developer

    Mobile development gets a little tricky πŸ™‚

    @media (max-width: 768px) check to see if the viewport (what you can see) is 768px wide or below. This is generally how we check to see if we’re using a mobile device.

    Portrait tablets start at 768px and mobile phones start at 767px.

    The width is the most important – it shouldn’t repeat it at all as the background is set to cover. When I tried the !important thing I thought it repeated as well, but it ended up being because you had the mobile-bg class set on the section below it as well.

    #127355
    Beau

    Hi Tom,

    First off – great theme! It’s exactly what I’ve been looking for.

    I’m having the exact same problem on my end with this site’s homepage. I’m just trying to get the image of the lighthouse to center itself in mobile views under 768px. I replicated David’s settings and code (even down to using his background image), and still I cannot figure out what the issue is. I’ve got the child theme added in with a bunch of other custom styles.

    Please help!

    Thanks,
    Beau

    #127356
    Beau

    Forget to add the website!

    http://www.finestkindcruises.com/

    #127357
    Beau

    Actually, I got it by adding some CSS for the image’s margins:

    @media (max-width: 768px) {
          .custom-mobile-bg {
                background-image: url('http://www.finestkindcruises.com/wp-content/uploads/banner-nubble-lighthouse1.jpg') !important;
                height: 200px;       
                margin-left: auto;      
                margin-right: auto;
         }
Viewing 15 posts - 1 through 15 (of 35 total)
  • You must be logged in to reply to this topic.