StudioPress

Forum navigation

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

Magazine Pro – Full width image on excerpts when minimizing?

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.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro – Full width image on excerpts when minimizing?

This topic is: not resolved

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 13, 2018 at 4:44 pm #225015
    Geek Dom
    Member

    Currently the excerpt text wraps around the image whilst you adjust the screen sizes. I want the image to become full width above the excerpt at 700px and below, but just can't figure it out!

    Please see link for an example.

    Example

    Thank You.

    December 14, 2018 at 3:01 am #225036
    Victor Font
    Moderator

    You need to adjust the CSS in the media queries. The media queries test for screen width and alter the appearance for the size of the screen your own. Almost every modern browser has a mobile tester built-in to their inspection tools. You would use this feature to visualize the CSS and test adjust accordingly. Once you're happy with the results, make the changes permanent by editing style.css.

    You may run into a problem though with jpg and png images. Enlarging an image will make it appear fuzzy. If you start with the larger image, you should be okay. You can also create a custom image size to accommodate the with of the content area.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    December 14, 2018 at 5:09 am #225046
    Geek Dom
    Member

    Thanks for the response Victor.

    I know how to identify and edit the corresponding media queries. However, I don't know the CSS code to enable the image to become full-width, and above the excerpt, once the screen size reduces to say @ max-width: 768px.

    Currently the excerpt text just wraps around the image when reducing screen size.

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