CSS Flexbox in Epik

Homepage Community Forums Epik Theme Support CSS Flexbox in Epik

  • This topic has 4 replies, 2 voices, and was last updated 6 years ago by Phil.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22567
    Phil
    Customer

      Hi,

      I’ve begun using the Blox plugin to create alternating text/graphic widgets similar to this:

      http://redtech.com/Who-We-Serve

      Using Flexbox, I’m trying to work out the various mobile responsive sizes and am hitting a wall at smartphone size (270px):

      http://dev.propelgrowth.com/what-we-do/marketing-content/thought-leadership-buying-process/

      The only two widgets I’m working on now are the “What Is Thought Leadership?” and “When integrated into your overall content marketing strategy…” sections.

      Please help. Thanks.

      #22570
      Wes
      Moderator

        I just checked the link, but I don’t see what the issue is? Is it working now?

        #22571
        Phil
        Customer

          Yes, pretty much. I just hope that I have the media queries done effectively.

          I tried to delete this thread but only see “Subscribe” and “Favorite” as options.

          One thing that I’m struggling with is getting the unordered list bullets to show up (e.g., “Well done Thought Leadership…”). How do I properly code that?

          Thanks!

          #22572
          Wes
          Moderator

            On line 210 in your style.css it’s disabled by default –

            li {
            	list-style-type: none;
            }

            There are a few ways to enable it. You could change none to disc or remove the whole thing and it would show. You can also change disc to whatever shape you want to be displayed. This is assuming you’re editing the style.css file directly.

            If you’re not editing the style.css directly and you’re adding CSS to the Customizer > Additional CSS page (recommended), then you can add something like this –

            li {
            	list-style-type: disc;
            }

            However, that will change all of the list items, so I would recommend leaving it as none, and only having it show for a specific div/class.

            Example: Add this to your CSS –

            .your-list li {
                list-style-type: disc;
                margin-left: 40px
            }

            And then add this to your HTML code –

            <ul class="your-list">
                <li>Sample List Content</li>
                <li>Sample List Content</li>
                <li>Sample List Content</li>
            </ul>

            You have more control when it’s done this way.

            #22573
            Phil
            Customer

              Thanks, Wes!

              It works when I add the CSS locally to the content block.

            Viewing 5 posts - 1 through 5 (of 5 total)
            • The topic ‘CSS Flexbox in Epik’ is closed to new replies.