• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Blockquote: expanding display width

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Blockquote: expanding display width

Tagged: blockquote css

  • This topic has 2 replies, 2 voices, and was last updated 4 years, 7 months ago by TheCCE.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 7, 2016 at 11:38 pm #1053
    TheCCE
    Participant

    Hello!

    I’m wrestling with getting my blockquotes to display the full width of the site (in line with the text). Right now, the blockquote sections are quite narrow when displayed on a desktop screen, and even more so on mobile.

    Here’s what it looks like on the desktop:
    Blockquote display

    Here’s the current coding:
    blockquote {
    display: block;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 1px 1px 1px #ccc;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    background-color: #FAFFF0;
    border-top: 1px solid #ccc;
    border-bottom: 3px solid #ccc;
    }

    Is there something in the .css file that I need to adjust to allow these sections to be full width?

    Thanks!

    Allan

    June 8, 2016 at 12:50 am #1054
    Chinmoy Paul
    Moderator

    Try this CSS

    blockquote {
      background-color: #FAFFF0;
      border: 1px solid #ccc;
      border-bottom: 3px solid #ccc;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-box-shadow: 1px 1px 1px #ccc;
      -moz-box-shadow: 1px 1px 1px #ccc;
      box-shadow: 1px 1px 1px #ccc;
      display: block;
      margin: 40px 0;
      position: relative;
      padding: 10px;
      width: 100%;
    }
    June 10, 2016 at 3:30 pm #1055
    TheCCE
    Participant

    That did it! Thanks very much for your help.

    I’m greatly appreciating this theme. It’s done wonders for my sites.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates