Responsive Design – How to center a div on small resolutions

Community Forums Forums Design Tips and Tricks Responsive Design – How to center a div on small resolutions

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  MrNerdy 6 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #89113

    MrNerdy
    Member
    Post count: 9

    I am using the Genesis starter theme and placed the ‘Simple Social Icons’-plugin in my right header widget area.
    Within the menu you can select the alignment of the icons (left, right, center).

    While I want the icons to right align on large resolutions, I would like them to center on resolutions widths of less than 767px; i. e. I placed the following code in my style css in order to override the alignright-class:

    @media only screen and (max-width: 767px) {
    
    	.simple-social-icons .alignright {
    		text-align: center;
    		float: none;
      		margin-left: auto;
      		margin-right: auto;
    		display: inline-block;
    	} 

    Unfortunatley, this does not work. The alignright-class is still applied: .alignright { float: right; text-align: right; }.

    I am coming from a Bootstrap-background, where I am used to hardcode my CSS / HTML working with the responsive classes of the framework, which is honestly so much more flexible than WordPress.

    Is there a tutorial / article that explains how to work and modify the responsive classes in Genesis, e.g. how to make divs invisibile on small resolutions, how to implement a Bootstrap-style menu?

    Would be great if you could advice me how to get this done.

    Thanks a lot for your help.

    #89146

    ramseyp
    Participant
    Post count: 99

    It sounds like your CSS isn’t specific enough, if the .alignright rules are still in effect. Can you change up the selectors so the specificity increases?


    #89148

    MrNerdy
    Member
    Post count: 9

    Hi, thanks for your reply.

    I just realized that the CSS of the plugin (Simple Social Icons) is constantly overwriting my child theme’s style.css. I already tried to center the icons within the plugin menu and then apply the following code for higher resolution media queries; however, wihtout success:

    .simple-social-icons ul.aligncenter {
    		text-align: right !important; 
    	}
    
    	.simple-social-icons ul.aligncenter li {
    		display: inline-block !important;
    		float: right !important;
    	}

    Any idea how to make sure that the plugin’s CSS-styles are overwritten?

    #89151

    MrNerdy
    Member
    Post count: 9

    Just found a working solutions:

    @media only screen and (min-width : 768px) and (max-width : 2560px)  {
    
    .simple-social-icons ul.aligncenter {
    		text-align: right !important; 
    	}
    
    }
    • This reply was modified 6 months, 2 weeks ago by  MrNerdy.
    • This reply was modified 6 months, 2 weeks ago by  MrNerdy.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.