Changing Min and Max Pics/line"Home Page Top Area" Gridiculous Pro Theme

  • Unknown's avatar
    martyabrahamson · Member ·

    Hi,

    I’m interested in changing the Min and Max number of Pics shown per line in the “Home Page Top Area” of the Gridiculous Pro Theme Layout. If you look at my site easternhomeinspections.com You will see that I have created 6 icons for visual reasons on varying screen resolutions. Well actually they are three images because I was working within the confines of the Gridiculous Pro Theme as is. I would like to modify so that Max images shown per line here is 6 instead of 3. And secondly so that the minimum is 2 instead of 1. Can you help me?

    Thanks,
    Marty

    The blog I need help with is: (visible only to logged in users)

  • staff-frank · Staff ·

    Hi,

    I found the following rule in your CSS: 

    .c4 {
    width: 33.33%;
}

    This determines the width of the home widgets.

    Try adding the following code in your Custom CSS: 

    .c4 {
    width: 16.665%;
}
  • Unknown's avatar
    martyabrahamson · Member ·

    This doesn’t work… The maximum amount of images aloud in the “Home page top area” is still 3 and also it changes the width of all widgets so the sidebar is now way too narrow. Also it doesn’t give me the desired minimum amount of images in one line of the “Home Page Top Area.” Which I want to be 2. I’ve put in the code you suggested and change my images to the dimensions and resolution they ultimately should be so you can see what happens.

  • Unknown's avatar
    martyabrahamson · Member ·

    This doesn’t work… The maximum amount of images aloud in the “Home page top area” is still 3 and also it changes the width of all widgets so the sidebar is now way too narrow. Also it doesn’t give me the desired minimum amount of images in one line of the “Home Page Top Area.” Which I want to be 2. I’ve put in the code you suggested and change my images to the dimensions and resolution they ultimately should be so you can see what happens.

  • staff-frank · Staff ·

    Hi,

    I’m sorry that my suggestion is not doing what you need it to do.

    I am going to add the tag “modlook” to this thread to alert staff to respond. Staff will be better able to assist you.

    All the best

  • Unknown's avatar
    martyabrahamson · Member ·

    Thank you!

    All the best

  • Unknown's avatar
    martyabrahamson · Member ·

    Thank you!

    All the best

  • Unknown's avatar
    martyabrahamson · Member ·

    Thank you!

    All the best

  • Unknown's avatar
    chanthaboune · Member ·

    Hi there!

    I did a little digging into the documentation for that theme. That area (called “Home Page Top Area”) is specifically designed to show three columns on larger screens and a single column on smaller screens.

    Unfortunately, there isn’t an option to adjust that in the theme settings themselves.

  • Unknown's avatar
    martyabrahamson · Member ·

    Actually I was messing around with CSS and HTML for the first time and I think I may have figured it out. I can get it to work in the editor with my developer tools in safari. Could you help with the next step of getting it to work in wordpress?

  • Unknown's avatar
    martyabrahamson · Member ·

    These are the changes that make it work in the developer tools…

    .home-widget:nth-child(6n+1) –sp1.wp.com:1 {
    clear: both;
    }
    .home-widget:nth-child(6n+1) – static:952
    {}
    .home-widget {
    width:16.666%;
    }

  • Unknown's avatar
    martyabrahamson · Member ·

    Here is a link to a screen shot that shows how I got it to work in safari with the developer tools. Please see the two items I edited in the CSS window in the bottom right hand corner. I changed 3n to 6n and also added “.home-widget {width:16.666%} to have the widget images change width just in that area.

  • Unknown's avatar
    chanthaboune · Member ·

    Oh gotcha! Let me suggest something that might be a little cleaner:

    #home-page-widgets {
    width: 100%;
    display: block;
}

#home-page-widgets aside {
    width: 16%;
    display: inline-block;
    float: left;
    clear: none;
}
  • Unknown's avatar
    martyabrahamson · Member ·

    Oh my God you are a wizard!! Thank you so much :-) Now of course I have a couple more requests!
    1. Can I make it so as the screen width narrows it doesn’t go straight from 6 icons wide to 1icon wide? instead it goes first from 6 to 3 and then to 2 but no less than 2?
    2. Also is there a way to take the borders off the images in these Gridiculous Text/image widgets completely with CSS?

    Thanks again,
    Marty

  • Unknown's avatar
    martyabrahamson · Member ·

    Oh my God you are a wizard!! Thank you so much :-) Now of course I have a couple more requests!
    1. Can I make it so as the screen width narrows it doesn’t go straight from 6 icons wide to 1icon wide? instead it goes first from 6 to 3 and then to 2 but no less than 2?
    2. Also is there a way to take the borders off the images in these Gridiculous Text/image widgets completely with CSS?

    Thanks again,
    Marty

  • Unknown's avatar
    chanthaboune · Member ·

    For the border, it would be possible to select and hide it with CSS. Here’s a little more info on that here:
    https://www.w3schools.com/cssref/pr_border-style.asp

    And you can make your site responsive with CSS (and make some changes to its current behavior with some work). Here’s a good intro to responsive web design using CSS:
    https://www.w3schools.com/css/css_rwd_intro.asp

    And remember, always backup your content and changes as you go!

  • Unknown's avatar
    martyabrahamson · Member ·

    Chanthaboune,
    Who can I pay to help with just a few things? I shouldn’t spend my time on this now as intrigued as I should turn my attention elsewhere. Do you do CSS consulting work or do you have recommendations for finding someone?

  • Unknown's avatar
    chanthaboune · Member ·

    Myself, I don’t do consulting work. However, you can post jobs to https://jobs.wordpress.net/ or any other freelancer marketplace. I know some people have great success with Upwork, for instance.

  • The topic ‘Changing Min and Max Pics/line"Home Page Top Area" Gridiculous Pro Theme’ is closed to new replies.