circles getting stretched with browser size

  • Resolved sulfdag

    (@sulfdag)


    12 years, 11 months 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!

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 11 months ago

    Can you demonstrate the issue by linking us it?

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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.

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months ago

    That took a while phew.

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 11 months 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.

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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.

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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.

    WPyogi

    (@wpyogi)

    12 years, 11 months 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.

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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.

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months ago

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

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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

    WPyogi

    (@wpyogi)

    12 years, 11 months 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;
}

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months ago

    link to show narrow about us page

    WPyogi

    (@wpyogi)

    12 years, 11 months 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/

    Thread Starter sulfdag

    (@sulfdag)

    12 years, 11 months 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.

Viewing 15 replies - 1 through 15 (of 26 total)
1 2

The topic ‘circles getting stretched with browser size’ is closed to new replies.