• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

@media queries for enews extended

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › @media queries for enews extended

This topic is: resolved

Tagged: css, enews, media

  • This topic has 2 replies, 2 voices, and was last updated 7 years, 7 months ago by newedgemarketing.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 18, 2015 at 3:30 pm #162785
    newedgemarketing
    Member

    I'm have placed the input text field and submit button on one line in my after post entry and footer enews widget

    however when you reduce the screen size the submit button becomes unreadable as its staying on one line and becomes too small

    on screen sizes below around 600px I'd like the input field and the submit button to go on one line

    This is what Ive tried but it doesn't work:


    @media
    only screen and (max-width: 320px) {

    .header-image .site-header .title-area {
    background-size: contain !important;
    }

    .enews-widget input {
    width: 100%;
    }

    .enews-widget input[type=”submit”] {
    width: 100%;
    }
    }

    I have tried it on the max-width 767px and it did work for the input text field but not the submit button,

    Anyone any ideas?

    http://www.newedgemarketing.com.au/
    August 19, 2015 at 4:42 pm #162915
    Ginger
    Participant

    Hi ,

    I don't think you want to try and make those two fields squeeze onto one line on a width that small. However, I see where the button is very narrow...it's picking up a width=30% on the submit button styling from up above. Your code is correct and will work ....the only issue is the quotes around the submit button are those curly formatted quotes and not plain text....you can tell in Inspect Element when the word "submit" doesn't change colors. Replace those quotes and the button will line up below the Email address field with a matching width that looks nice.


    @gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

    August 20, 2015 at 2:27 am #162966
    newedgemarketing
    Member

    perfect BIG thank you Ginger! 😉

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble