Topbar and other layout issues

  • Resolved peterpac

    (@peterpac)


    5 years, 5 months ago

    Hi all

    I’m developing a site with a boxed layout (the default 1080), I’m also using a child theme there are three issues the first two are with the topbar.

    1. The topbar by it’s default css is set to display wide: .bnt-topbar {
    width: 100%;
    padding: 16px 0;
    }

    So it’s wider than my site content. I’ve played with various ways to adjust this without total success. Does anyone have suggestions for this?

    2. I have uploaded twitter and instagram icons to media. These display OK until I navigate to a ‘project’ page where they display as broken links, so the path must be different. The css I have inserted into the customizer is:

    <div class=”bnt-container”>This is my topbar -&nbsp“twitter?&nbsp“instagram</div>

    How to fix the topbar project page issue?

    3. This is a different layout issue it’s on my posts page. I’m using a plugin ‘Advanced Excerpt’ but I would have the same issue using the inbuilt Excerpt. I want the thumbnail image to display at the left and the post to wrap to the right of this. I can do this OK but I also want a much smaller image than the default 100% so I have added this to the child css:

    .post-thumbnail { float: left; margin-right: 20px; max-width: 65%; }
    .entry-title { clear: none !important; }

    It’s OK but there’s quite a lot of space between the right side of the image and the Title and post text. Does anyone know how to reduce this space?

    cheers

    Peter

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter peterpac

    (@peterpac)

    I solved the issue of the broken links to the social icons on the project pages by creating a separate folder ‘social-icons’, uploading the images there and pointing to them using the https:// … absolute url.

    The only solution I have for the topbar not aligning with a boxed layout is to switch the layout to wide, that will work but it’s not what I really want, so not ideal. Unless I’m missing something it looks like this ability isn’t included in the expansion pack and really it should be, but maybe Andrii has something to add to this?

    However, I’m still looking for the solution to issue 3 above.

    Theme Author satoristudio

    (@satoristudio)

    Hello Peter,

    The first item has been addressed via email (correct me if I’m missing smth)
    Regarding 3), try div.post-thumbnail for the first declaration ??

    Thread Starter peterpac

    (@peterpac)

    Thanks Andrii

    div.post-thumbnail worked well. It has significantly reduced the size of the image on the actual post page though, it’s now only a little larger than the one next to the excerpt, I don’t really understand that behaviour but I can live with it.

    Regarding the topbar I have now opted to use a wide layout in lieu of boxed and it’s looks better anyway … so happy with that.

    … and yes, as per email all the other issues are now resolved.

    Thank you for your support and I’m very happy with Bento : )

    Theme Author satoristudio

    (@satoristudio)

    If you want a larger image, you can adjust the value of the max-width parameter upwards ?? in case of more questions about Bento don’t hesitate to ask!

    Thread Starter peterpac

    (@peterpac)

    Hi Andrii

    Thanks for your reply. I’m not sure I can address the correct selector for this. So far I have:
    div.post-thumbnail { float: left; max-width: 30% !important; margin: 0px 20px 0px 0px; }
    .entry-title { clear: none !important; }

    Which affects how things are displayed on the posts page (where the excerpts are).

    Please note that the image is set to 30% as I only want a small image on this page.

    On the actual post/article I want a much larger image and the image there is only slightly larger than the image on the posts page. On the posts page the selector appears to be the same i.e. div.post-thumbnail.

    There is also, on the post page:
    .attachment-post-thumbnail.size-post-thumbnail.wp-post-image

    but this is already set to max-width: 100%;

    So not sure where you mean to adjust the max-width so I can have a small image on the posts page and a considerably larger one on the page where the actual post is?

    cheers

    Peter

    Theme Author satoristudio

    (@satoristudio)

    To apply the snippet only to the blog posts page and not the individual posts, you should make the CSS declarations a bit more specific by adding the .blog class:

    .blog div.post-thumbnail { float: left; max-width: 30% !important; margin: 0px 20px 0px 0px; }
.blog .entry-title { clear: none !important; }

    Does this solve the issue?

    • This reply was modified 5 years, 5 months ago by satoristudio.
    Thread Starter peterpac

    (@peterpac)

    Yes solved! I just couldn’t easily find that .blog selector. I installed a plugin Custom CSS so it’s easier to view the entire cascade line – sometimes it can be right in front of you and you don’t see it.

    Anyway muchas gracias : )

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Topbar and other layout issues’ is closed to new replies.