Responsive Design – How to center a div on small resolutions

[MrNerdy]

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.

[ramseyp]

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?

---

Community • Work • Conversations

[MrNerdy]

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?

[MrNerdy]

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; 
	}

}

[Author]

Posts