• Resolved tstinar

    (@tstinar)


    I am managing the site for our neighborhood association. It needed an overhaul and generally I am pleased with the direction it is going. I have been going into CSS to make features work. So far, considering CSS, there is only one problem that has occurred with my edits.

    All but two pages look correct as far as padding around the logo and the container(?) that shows your page content. I say container because I’m not actually sure what is being used to display the page content but it looks like a floating tile on every page.

    Looking at http://whnalax.org/ and http://whnalax.org/landing/ , you can see the difference in the padding around the logo and the page contents container are different. I am using the plugin WP Add Custom CSS for the two pages not showing the correct padding. The reason I am using the custom CSS is to create floating tiles that wrap when browser size changes or prevent the need for left to right scrolling on mobile (tables required this).

    I am guessing I need to add the CSS coding information for padding in the correct areas to the custom CSS fields. I don’t know where to find that in the long string of CSS coding for the Tortuga Template. My guess is that the ‘page container’CSS is being replaced with the new container CSS for my tiles. When I add my custom CSS to the main theme CSS, every page is affected like the two in question but those pages will no longer wrap when screen size changes.

    Any ideas?

    The coding below is what I am using on those two pages (landing page For Our Neighbors and also Social Media Feeds).

    .some-page-wrapper {
    display: flex;
    }

    .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    }

    .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    padding: 6px;
    }

    .card {
    /* Add shadows to create the “card” effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }

    /* On mouse-over, add a deeper shadow */
    .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    /* Add some padding inside the card container */
    .container {
    padding: 2px 6px;
    }

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter tstinar

    (@tstinar)

    The issue was with the container attributes replacing the default template container attributes.

    Removed the section below and all was right as rain.

    /* Add some padding inside the card container */
    .container {
    padding: 2px 6px;
    }

Viewing 1 replies (of 1 total)

The topic ‘No padding with custom CSS’ is closed to new replies.