WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Responsive Adjustments (13 posts)

  1. soulluciani01
    Member
    Posted 1 year ago #

    On my main page I have 6 circles. I would like to keep them in place and not have them move around the way a responsive theme does. However, I would like to keep the mobile theme set to responsive. How can I make this adjustment?

    http://www.soulluciani.com

  2. Andrew
    Forum Moderator
    Posted 12 months ago #

    Redeclare a width on the element that contains the circles; enter this at the bottom of your Child Theme style.css file:

    #page { width: 1100px; }
  3. soulluciani01
    Member
    Posted 12 months ago #

    When I tested that with firebug it seemed to work, but when I incorporated it into my child theme it doesn't work. Any suggestions?

  4. soulluciani01
    Member
    Posted 12 months ago #

    After I fixed that era, this worked as well. I like it better without the fixed width. Is there a way I can make it so that there is only 3 circles/posts per row?

  5. soulluciani01
    Member
    Posted 12 months ago #

    I got most of it figured out. The only thing is that when the browser is shrunk down the posts loose the transparency and reposition to a 2 row format. Can I stop that?

  6. Andrew
    Forum Moderator
    Posted 12 months ago #

    Add this to the bottom of your Child Theme style.css file:

    .blog .hentry a .attachment-post-thumbnail,
    .archive .hentry a .attachment-post-thumbnail,
    .search .hentry a .attachment-post-thumbnail {
     border-radius: 180px;
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -webkit-filter: grayscale(1);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: gray;
     filter: url('inc/desaturate.svg#greyscale');
     opacity: .8;
     -webkit-opacity: .8;
     -moz-opacity: .8;
     transition: all .3s ease-in-out;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     width: 100%;
     height: 100%;
     z-index: 1;
    }
    
    .hentry {
     width: 180px;
     height: 180px;
    }
  7. soulluciani01
    Member
    Posted 12 months ago #

    I tried that, it jacked up the mobile view of the site. Is there a way define different page width for the mobile only? sorta like you gave me for the menu, with the @media only command.

  8. Andrew
    Forum Moderator
    Posted 12 months ago #

    I don't understand the issue, sorry.

  9. soulluciani01
    Member
    Posted 12 months ago #

    Ok. If I adjust the page width as you suggested, it works except it messes up the mobile view of the theme. I am trying to figure out how to adjust the page width for the mobile so I can get the desired result in both views. I hope this makes sense

  10. Andrew
    Forum Moderator
    Posted 12 months ago #

    I can't experience that issue when I put this at the bottom of your Child Theme style.css file:

    #page { width: 1100px; }
    
    .blog .hentry a .attachment-post-thumbnail,
    .archive .hentry a .attachment-post-thumbnail,
    .search .hentry a .attachment-post-thumbnail {
     border-radius: 180px;
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -webkit-filter: grayscale(1);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: gray;
     filter: url('inc/desaturate.svg#greyscale');
     opacity: .8;
     -webkit-opacity: .8;
     -moz-opacity: .8;
     transition: all .3s ease-in-out;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     width: 100%;
     height: 100%;
     z-index: 1;
    }
    
    .hentry {
     width: 180px;
     height: 180px;
    }
  11. soulluciani01
    Member
    Posted 12 months ago #

    That adjusts the mobile theme but its not what I am looking to adjust it to. Perhaps i am not explaining myself well.

    I would like to adjust my home page where the posts are, so that there are 2 rows of posts with 3 in each row. The issue is If I adjust the page it makes it much bigger on mobile devices. I would like to keep the mobile view as it is now and only adjust the regular site view. I hope this makes sense.

  12. Andrew
    Forum Moderator
    Posted 12 months ago #

    You have a syntax error where you aren't closing off your media query. The above CSS should not go inside a media query.

    I would like to adjust my home page where the posts are, so that there are 2 rows of posts with 3 in each row

    You can change the width of this style like you did before:

    #page { width: 1100px; }

    To 600px?

  13. soulluciani01
    Member
    Posted 12 months ago #

    Brilliant! Thank you so much for your time.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.