Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1419617

    I tried usen the css from documentation, but this is styling both the image, the post content and the footer. All on the posts.

    How to only style featured image full width: https://floradanicadyner.iconiq-dev.dk/hvad-betyder-maerkerne/

    #1419798

    Hi BenjaminSpeedtsberg,

    I tried to check your site however it seems to be still in Maintenance mode:

    Sorry, we are currently updating our site - please try again later.

    Best regards,
    Nikko

    #1419826

    Hi, i’m sorry, see private content. :-)

    #1419967

    Hi BenjaminSpeedtsberg,

    Thanks for giving us admin access, I have added this CSS code in Enfold > General Styling > Quick CSS:

    .single-post main.content img.attachment-featured {
        width: 100%;
    }

    Please review your website.

    Best regards,
    Nikko

    #1419984

    I see, thanks!

    Still the same on mobile devices, and it looks like, that the image are not a separated class above the content, but instead, the image class are inside the content. That’s where I couldn’t figure out, how to style the image 100% only.

    #1420119

    Hi BenjaminSpeedtsberg,

    I see, please try to add this CSS code:

    @media only screen and (max-width:767px) {
        #main {
            overflow: hidden;
        }
    
        .single-post main.content img.attachment-featured {
            width: 118%;
            max-width: none;
            margin-left: -9%;
        }
    }

    Best regards,
    Nikko

    #1420222

    It looks right!

    There is just 2 issues with this.

    – The top banner and footer is now full width on posts.
    – And on mobile devices, the menu is full width.

    Maybe this is not possible? I saw that the image are under the content element on mobile, so as far as I see, the image element is only possible to style full width, if everything else is styled full width.
    On desktop, the image is separated from the content, and therefor possible to style.

    #1420385

    Hi BenjaminSpeedtsberg,

    I think the reason for the issue you mentioned is caused by this CSS code:

    #top.single .container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    You will need to make it more specific so it doesn’t affect other areas.
    You can target the main area without affecting the header or footer section by replacing #top.single .container with #top.single #main .container

    Best regards,
    Nikko

    #1420730

    Nice! It worked for the top bar. But the footer(page) is still affected. I assume that it’s becasuse we’re using af page to replace the footer.

    Do you have any other tricks, that could fix this last thing? Otherwise, I think we will go with the standard version.

    If just the image element was outside of the content, it would have been a lot easier! :O

    Thanks again!

    #1420762

    Hi BenjaminSpeedtsberg,

    I see, please replace #top.single #main .container to #top.single #main > .container_wrap > .container
    Let us know if it helps, if it does not help then we’ll need to use a child theme.

    Best regards,
    Nikko

    #1420764

    That did the job, thanks!

    #1420766

    Hi BenjaminSpeedtsberg,

    You’re welcome!
    I’m glad that we could help you :)

    Best regards,
    Nikko

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.