[Resolved] Page header with mobile images

Home Forums Support [Resolved] Page header with mobile images

Home Forums Support Page header with mobile images

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #246341
    Diego Fernando

    Hello Tom. I want to ask you two questions.
    The first: When I put a page header image, on the desktop it looks excelent but on mobile, the page header does not see well. I was reading other messages when you say that it is better to do it with a code and an individual image for each size of mobile, is it still so?

    What is the best size for a desktop and mobile version image? I want the look of the site to look great.

    The second: When I put the text in the content option of Page header and publish the post, the size I get is different depending on the device, desktop or mobile. Here is the code I am putting:

    <span style=”font-size: 36pt;”>Esto es un ejemplo de discurso</span>

    The relationship between the text and the image in the desktop version is good, but in mobile the text looks very large.

    How can I make the letter size look good according to the device?

    Thanks a lot for your help.

    #246386
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Yes, it’s usually a good idea to specify different images if your one background image doesn’t work on multiple screen sizes.

    As for your font size, try giving your span a class instead:

    <span class="my-span">Text</span>

    .my-span {
        font-size: 36pt;
    }
    
    @media (max-width: 768px) {
        .my-span {
            font-size: 16pt;
        }
    }

    Hope this helps 🙂

    #246986
    Diego Fernando

    Hello Tom. I have to put this class in CSS (Simple css)?

    I want that letter size in mobile looks good in page header, because when I put it in desktop looks good but in mobile looks very big.

    I want that this letter size only applies for mobile page header.

    The other question is: I used this code for specify different images for mobile device:

    @media (max-width: 768px) {
    .generate-content-header {
    background: url(my-url);
    }
    }

    Is that correct? After that, I used wordpress customizer the aspect is this:example

    What can I do to make the appearance of the image look good? The image size is 640×432. Thank you Tom!!

    #247016
    Tom
    Lead Developer
    Lead Developer

    Yes, the CSS would go in Simple CSS, and your HTML would need to be adjusted to include the class instead of the inline styles.

    Try this for your image:

    @media (max-width: 768px) {
        .generate-content-header {
            background: url(my-url);
            background-size: cover;
            background-position: center center;
        }
    }
    #247024
    Diego Fernando

    And tom, If I want to put different images for each post? ¿Can code change?

    #247025
    Tom
    Lead Developer
    Lead Developer

    Use my Simple CSS plugin – it has a meta box for CSS on specific pages: https://wordpress.org/plugins/simple-css/

    #247035
    Diego Fernando

    I did it Tom. Thanks a lot 🙂 !

    #247088
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.