WordPress.org

Ready to get started?Download WordPress

Forums

Spun
number of circles per row (6 posts)

  1. katc
    Member
    Posted 1 year ago #

    hello,

    i have been struggling with this problem for a while and i have no idea how to address it. i am a bit of a css newbie and have been following information and advice on this forum to perform certain customizations to the website i have tried to build.

    my question: my website has 6 circles that link to 6 posts. i would like the circles to be centered on the main page, with 2 rows of 3 circles each. this seems to be the case when i look at the website on a browser on my computer (image). however, when i load the page on a tablet, there are 2 rows with 4 circles on top and 2 on the bottom. they are not centered (image).

    how can i get 2 rows of 3 circles that are centered on any browser? for the life of me i cannot figure it out. i have been staring and playing with the custom css on my child theme. currently, i have some css that looks like this:

    #main {
    display: table;
    margin: 0 auto;
    float: none;
    width: auto;
    }

    #page {
    margin: 0 auto;
    padding: 0px 100px;
    width: auto;
    }

    #primary.content-area {
    margin: 0 auto;
    padding: 40px 0px 0px 0px;
    width: 600px;
    }

    .single .hentry,
    .error404 .hentry,
    .page .hentry,
    .search-no-results .no-results {
    margin: 0 auto;
    padding: 20px 0px 100px 0px;
    width: 600px;
    height: auto;
    }

    any help would be appreciated. thanks.

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    We'll need to see your site

  3. katc
    Member
    Posted 1 year ago #

    here is the link

    any direction would be much appreciated. thanks.

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    You need to change the width of "#page" on the iPad, and it looks like you need to put your current "#page" width in a desktop media query because it's affecting mobile:

    @media screen and ( min-width: 800px ) {
    
    }
    
    @media screen and ( min-width: 1200px ) {
    
    }
  5. katc
    Member
    Posted 1 year ago #

    hi andrew. thanks for the suggestion.

    does this css just need to be added or from what you can tell, does the existing css have to be changed? just adding it to my custom css editor didn't seem to change the appearance of the number of circles per row in a tablet.

  6. Andrew
    Forum moderator
    Posted 1 year ago #

    Use this instead:

    @media screen and (min-width: 1200px) {
    
        #main {
            width: 60%;
            margin: 0 auto;
        }
    
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.