WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] circles getting stretched with browser size (27 posts)

  1. sulfdag
    Member
    Posted 1 year ago #

    Hi Caroline and Spun users,

    I had a resizing issue with the text (really narrow content) and it seems to be okay now after following a previous thread

    but still there is an issue with the circles, they look ok (like a circle) when the browser (firefox,chrome) is really small but when the page is maximized the circles are stretched sideways.

    any suggestions on how this can be sorted? Ive looked through all 16 pages on the spun support related to circles without any new info. I understand that it has to do with the styling css coding only and nothing else but have not figured it out yet.

    Thanks!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you demonstrate the issue by linking us it?

  3. sulfdag
    Member
    Posted 1 year ago #

    thanks for the prompt reply! its on local host will get it online and show you.

    Getting some info from an earlier post of Caroline, I am using a custom page template as the home page and now setting a featured image shows the whole image instead of just what can be seen in the circle :) any idea what causes that?

    maybe modifying the theme instead of using a child wasnt such a great idea but i wanted to dive in and mess with it.

  4. sulfdag
    Member
    Posted 1 year ago #

    That took a while phew.

    its online!
    http://bowsoflove.com/test2/

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    There are CSS styles that give the circles smaller heights than they have widths, meaning they will look squashed. Are you aware of these styles?

    BTW: It doesn't look like a Child Theme has been set up. If you're planning on updating the theme then it's worth setting one up.

  6. sulfdag
    Member
    Posted 1 year ago #

    Thanks Andrew, I cannot find where that is in the style.css.
    Could you please give some direction on fixing the squashed circles and why the "featured image" loaded to the page is not showing inside a circle as it does usually?

    I started with a child theme then thought it would be better to modify the theme under a new name so that I can see the original style.css as I make changes.

  7. sulfdag
    Member
    Posted 1 year ago #

    Its not a matter of wanting to have my own theme but I felt I would learn more by directly trying to modify the theme instead of using a child theme.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, quite to the contrary - you'll learn a lot making and using a Child Theme. You can see all the theme styles using a browser tool like Firebug.

    And you certainly don't want to lose all your changes when the theme is updated.

  9. sulfdag
    Member
    Posted 1 year ago #

    Since I am planning to use mainly static pages with only one blog page, and the goal is to have a basic working site I thought I'd have it modified separately. but eitherway, the issues of the squashed circles and featured images not showing inside a circle are not related to modifying a theme or using a child right right? If it cannot be sorted I will set up a child theme but, again, as mentioned earlier I think I learnt a lot about the styling and all the work that goes into it by modifying the theme.

  10. sulfdag
    Member
    Posted 1 year ago #

    Wpyogi, Thanks, I am not modifying the original theme directly. I have renamed it and loaded it as a new theme

  11. sulfdag
    Member
    Posted 1 year ago #

    blog .hentry a,
    .archive .hentry a,
    .search .hentry a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;

    this shows that the circles are evenly sized

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What have you modified in the style.css file? (In a child theme it's much easier to find/test what changes are causing problems.) Looks like it might be the height here:

    .single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
        height: 100px;
        padding: 40px;
        width: 90%;
        z-index: 10;
    }
  13. sulfdag
    Member
    Posted 1 year ago #

    WPyogi, yes I had changed that to fix the issue of the about us page content being really narrow! so keeping it as what you posted above fixes it but messes up the circles!

    i changed it back and the circles are fine now but the page content is messed up as you can see from this link. any suggestions regarding that? Thanks for your time

  14. sulfdag
    Member
    Posted 1 year ago #

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    An image does not show the code...try using Firebug to see what CSS is messed up. Also make sure you don't have any problematic CSS errors:

    http://jigsaw.w3.org/css-validator/

  16. sulfdag
    Member
    Posted 1 year ago #

    WPyogi! i just tracked down why i originally changed it. it was your recommendation to some other thread!
    this one

    any idea how to get around this page width fix affecting the home page circles?
    it doesnt make sense to me that circle sizes are defined but how it gets stretched out regardless.

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The site in that thread was a huge mess...I certainly would not recommend copying any code from there.

  18. sulfdag
    Member
    Posted 1 year ago #

    ok will check through that. looks like a load of errors. is it supposed to be zero? (not an entirely dumb question as it may still work ;)

  19. sulfdag
    Member
    Posted 1 year ago #

    oh no i didnt copy code from that site. just used your suggestion to make the width 90%

    Thanks

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, a lot of errors aren't really problematic - so don't try to get rid of all of them.

    The problem I noted above was about HEIGHT not width.

  21. sulfdag
    Member
    Posted 1 year ago #

    .sticky {
    }
    .single .hentry,
    .error404 .hentry,
    .page .hentry,
    .search-no-results .no-results {
    margin: 0 1 1.5em;
    padding: 40px 40px;
    width: 700px;
    height: auto;
    z-index: 10;

    reverted back to an old style sheet closer to the original for spun theme (lot of errors in the current one as seen in the validator).

    the page width and the squashed circle issues are fixed now.

    would greatly appreciate any input regarding why the featured image in a page is not showing inside the circle as it usually does.

    Thanks!

  22. sulfdag
    Member
    Posted 1 year ago #

    Thanks WPyogi but i went back to an old style sheet because maybe along the way a change was made and I couldnt locate or remember it.

  23. sulfdag
    Member
    Posted 1 year ago #

    page link

    update: the page width issue is fixed in the local host but after uploading to the server it still happens. cant get my head around as to why though.

    now the only significant changes is that i have a custom template as home page

  24. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Height here:

    #page {
        background: none repeat scroll 0 0 #FFFFFF;
        height: 650px;
        margin: 0 auto;
        padding: 0 50px;
        width: 1000px;
    }
  25. sulfdag
    Member
    Posted 1 year ago #

    whaaa. its sorted! Thanks WPyogi.

  26. sulfdag
    Member
    Posted 1 year ago #

    risking appearing greedy, i have to still keep the thread open as i dont even know where to start as to why the featured image on a page is not showing inside the circles as the spun theme usually does =)

    inching progress!

  27. sulfdag
    Member
    Posted 1 year ago #

    will post a new thread as the title of this thread is resolved. Thanks WPyogi!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.