Custom Twenty Sixteen CSS

 

File-Adobe-Dreamweaver-CSS-01-iconWelcome to my Custom Cascading Style Sheet [CSS] created 12/10/15. Read http://wp.me/PEmnE-Bt to see how CSS works. Explore this style sheet. Copy, if you want. If you do, credit this blog & jalexartis@cyclingexperiences.com.

Twenty Sixteen Theme Custom CSS related articles.

Revised 07/06/18

SUGGESTED READING

~ Change Log ~ CSS w/REM ~ Minify CSS ~ PageSpeed Insights ~ px-to-em conversion  ~

Last line #: 820

.menu-toggle,.mp6 #wpadminbar {
	display: none;
}

html {
	margin-top: .3125em !important;
}

.site-logo {
	bottom: .625em;
	left: 2.5em;
	max-height: 5.5em;
	position: absolute;
	top: .4em;
	width: auto;
}

.site {
	margin-top: 0;
}

a:hover {
	opacity: .9 !important;
}

img:hover {
	opacity: .9 !important;
}

#masthead,#colophon,#content {
	background: #000000;
}

div.site-branding {
	margin-bottom: 0;
	margin-top: 0;
}

div.header-image {
	margin-bottom: 0;
	margin-top: 1em;
	padding-top: .625em;
}

header-image,header#masthead.site-header, {
	margin-bottom: .625em;
	margin-top: 0;
}

header#masthead.site-header {
	padding-bottom: 0;
	padding-top: 0;
}

h1.site-title,p.site-title {
	font-size: 2.4225em;
	margin-left: 2.2em;
	padding-top: 0;
}

.site-description {
	font: italic .73125em Helvetica;
	margin-left: 7.4em;
	margin-top: 0;
}

.entry-summary,.entry-title {
	text-align: center !important;
}

.hentry {
	margin-top: .8em !important;
	border-bottom: .3125em double #c6c6c6;
	padding-bottom: .625em;
	padding-top: 0;
}

.site-main>article {
	margin-bottom: .5em;
	padding-top: .9375em;
}

.entry-title {
	font-size: 1.125em !important;
	hyphens: none;
	margin-bottom: .875em !important;
	margin-top: -.5em !important;
	margin-left: auto;
	margin-right: auto;
	width: 65%;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
}

.comments-area,.post-navigation {
	float: right;
	margin-right: 0;
	width: 72%;
}

.entry-summary {
	font-size: 1em !important;
	font-style: italic;
	margin-bottom: .625em !important;
	padding-top: .3125em;
}

.comments-area #respond #comment-form-comment,.entry-footer {
	padding-top: 0 !important;
	margin-bottom: .625em;
}

a.more-link {
	box-shadow: none;
	display: block;
	font-weight: 700;
	text-align: center;
}

.site .tiled-gallery {
	margin-bottom: .45em !important;
}

.entry-footer {
	line-height: 3;
	margin-top: 0;
}

.comments-area {
	margin-bottom: 0;
}

.logged-in-as a {
	display: none;
}

.comments-area #respond form {
	margin-top: .3125em;
}

.comments-area #respond {
	padding-bottom: 1.75em;
}

.comment-list article {
	padding-top: 0;
}

.comments-title {
	border-top: .1875em solid #1a1a1a !important;
}

a.post-thumbnail {
	margin-bottom: .625em;
}

.post-thumbnail img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

a.post-thumbnail img {
	padding-top: 0;
	opacity: 1;
}

div.post-thumbnail {
	margin-bottom: 1.25em;
}

div.slideshow-window {
	background: rgba(255,255,255,0);
	border: 0;
}

div.slideshow-controls {
	display: none;
}

img {
	padding-top: .3125em;
}

p {
	font-size: 90%;
	line-height: 1.5;
}

#jp-post-flair+.author-info {
	padding-bottom: 1em;
	padding-top: .5em;
}

.comment-reply-title,.comments-title,.page-title,.post-navigation .post-title,blockquote {
	font-size: .9375em;
}

.comment-reply-title {
	border-top: .1875em solid #1a1a1a;
	padding-top: .3125em;
}

.author-info {
	padding-bottom: .3125em !important;
	padding-top: 0 !important;
}

.post-navigation div+div,nav.navigation.post-navigation {
	border-top: .125em solid #1a1a1a;
}

nav.navigation.post-navigation {
	border-bottom: .125em solid #1a1a1a;
	margin-bottom: 3em !important;
}

.post-navigation {
	margin-bottom: 0;
}

.post-navigation a,.sd-rating,.sharedaddy {
	padding-bottom: 1.5625em;
	padding-top: .3125em;
}

div.jetpack-likes-widget-wrapper {
	height: 2.6875em;
	min-height: 3.75em;
	padding-bottom: .625em;
	padding-top: .5em;
}

.wpl-count-text {
	height: 43px !important;
}

.entry-content #jp-relatedposts {
	padding-bottom: .3125em;
	padding-top: .3125em;
}

blockquote {
	margin: 0 0 2em 1.5625em;
	margin-left: 0 !important;
	padding-left: 1em;
	padding-right: 1em;
}

blockquote.alignleft.below-entry-meta {
	margin-left: -40% !important;
}

div#infinite-handle {
	padding-bottom: .5em;
	padding-top: 1.125em;
	text-align: center;
}

.site-main #infinite-handle span button {
	text-transform: capitalize;
}

.sticky-post {
	font-size: .6125em;
	font-style: italic;
	letter-spacing: .06923077em;
	text-transform: capitalize;
}

.widget {
	border-top: .1875em solid #000000;
	line-height: 1;
	margin-bottom: .625em;
	padding-top: 1.5em;
}

h2.widget-title {
	text-align: center;
}

.widget .widget-title {
	font-family: helvetica;
	font-size: .96em;
	font-weight: 900;
	margin-bottom: .125em;
	text-transform: capitalize;
}

.widget .aligncenter {
	margin-bottom: .25em;
	padding-top: .0625em;
}

section#image-3.widget.widget_image {
	border-top: 0;
	padding-top: .75em;
}

section#blog-stats-4.widget.widget_blog-stats ul {
	list-style: none;
}

section#image-7.widget.widget_image,section#image-11.widget.widget_image,section#nav_menu-5.widget.widget_nav_menu {
	border-top-width: 0;
	margin-bottom: 0;
}

.widget-area>:last-child,.widget>:last-child {
	font-size: .96em;
	margin-bottom: 0;
	line-height: 2.25;
}

section#nav_menu-5.widget.widget_nav_menu {
	border-top-width: 0;
	margin-bottom: -1em;
	padding-top: 0;
}

.widget_blog-stats,.widget_calendar caption {
	margin-top: 0;
	text-align: center;
}

section#calendar-4.widget.widget_calendar {
	padding-top: 0;
}

.widget_calendar caption {
	font-family: Helvetica;
	font-size: 1.5em;
	margin-bottom: 0;
	padding-top: 0;
}

#blog-stats-4.widget.widget_blog-stats li {
	list-style-type: none;
	text-align: center !important;
}

#blog-stats-4.widget.widget_blog-stats ul {
	margin-left: 0;
}

section#gravatar-2.widget.widget_gravatar {
	margin-bottom: .75em;
	padding-top: .75em;
}

section#grofile-3.widget.widget-grofile.grofile {
	margin-bottom: 0;
	text-align: center;
}

.goog-te-gadget {
	text-align: center;
	background: rgba(0,255,255,0) !important;
}

.goog-te-gadget img {
	display: none;
	color: rgba(255,255,255,0);
}

.goog-te-gadget  .goog-te-gadget-simple {
	background-color: #000000;
	border: none;
}

.goog-te-gadget .goog-te-gadget-simple a {
	color: #1f881f;
	font-family: Merriweather, Georgia, serif;
	font-size: .96em;
	font-weight: 400;
}

section#google_translate_widget-5.widget.widget_google_translate_widget {
	margin-bottom: 0;
}

#google_translate_element span {
	border: none !important;
	padding-left: .25em;
}

section#jetpack_display_posts_widget-3.widget.widget_jetpack_display_posts_widget {
	padding-top: .25em;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
	border-top: .0625em solid #1a1a1a;
	font-size: .9375em;
	font-style: italic;
	font-weight: 400;
	line-height: .2em;
	margin-bottom: .3125em;
	padding-bottom: 0;
	padding-top: .9375em;
	text-align: center;
}

.jetpack-display-remote-posts h4 a {
	line-height: 1.25em;
	color: #c6c6c6;
}

.widget_jetpack_display_posts_widget .jetpack-display-remote-posts img {
	margin-top: 0;
	margin-bottom: .5em;
	padding-top: 0;
	width: auto;
}

section#text-395027151.widget.widget_text {
	margin-top: 0;
}

section#text-395027151.widget.widget_text,section#text-395027701.widget.widget_text {
	font-size: .91353em;
	padding-top: 0;
	margin-bottom: 0;
}

.textwidget>:last-child {
	line-height: 1.3;
	text-align: justify;
}

.site-footer {
	padding-bottom: 1.875em;
}

.site-info {
	font-size: 1.03125em;
	line-height: 1.6153846154;
}

article#post-18262.post-18262.page.type-page.status-publish.hentry,article#post-
2.post-2.page.type-page.status-publish.hentry,article#post-21459.post-

21459.page.type-page.status-publish.hentry,article#post-21465.post-21465.page.type-page.status-publish.hentry,article#post-27590.post-27590.page.type-page.status-publish.hentry,article#post-40459.post-40459.page.type-page.status-publish.hentry,article#post-42044.post-42044.page.type-page.status-publish.hentry,article#post-4684.post-4684.page.type-page.status-publish.hentry,article#post-52399.post-52399.page.type-page.status-publish.hentry,article#post-53756.post-53756.page.type-page.status-publish.hentry,article#post-5991.post-5991.page.type-page.status-publish.hentry,article#post-61936.post-61936.page.type-page.status-publish.hentry {

margin-top: 0 !important;
}

article#post-53756.post-53756.page.type-page.status-publish p {
	font-size: 80%;
	margin-bottom: .5em;
}

table {
	font-size: .8125em;
}

.syntaxhighlighter table td.code .line {
	padding: 0 .5em !important;
}

.syntaxhighlighter table td.gutter .line {
	padding: 0 .4em 0 0 !important;
}

.syntaxhighlighter table {
	font-size: .8125em !important;
}

.syntaxhighlighter code {
	white-space: normal;
}

div#actionbar li.actnbr-btn,div#actionbar.actnbr-pub-twentysixteen.actnbr-has-
customize.actnbr-folded {
	background: #5e5e5e !important;
}

div#actionbar,div#actionbar li.actnbr-btn a {
	opacity: .9;
	background: #1f1f1f;
}

div#actionbar {
	border-bottom: #1f1f1f;
	border-left: #1f1f1f;
	border-right: #1f1f1f;
	border-top: #1f1f1f;
}

div#actionbar li.actnbr-btn a:hover .gridicon {
	fill: #1f881f;
}

div#actionbar li.actnbr-btn>a:hover {
	color: #1f881f;
}

div#actionbar .actnbr-ellipsis.actnbr-hidden>.gridicon,div#actionbar li.actnbr-btn>a {
	color: #c6c6c6;
	fill: #c6c6c6;
}

div#actionbar li.actnbr-btn>a .gridicon {
	fill: #c6c6c6;
}

div#actionbar .actnbr-ellipsis.actnbr-hidden>.gridicon:hover {
	fill: #1f881f;
}

@media screen and (max-width:139em) and (min-width:105em) {
	.infinite-wrap article,.site-main .infinite-loader {
		margin-bottom: 0;
	}

	h1.site-title,p.site-title {
		margin-left: 10em;
	}

	@media screen and (min-width:140em) {
	.infinite-wrap article,.site-main .infinite-loader {
		margin-bottom: 0;
	}
}

@media screen and (max-width:20.5625em) and (min-width:15em) and
(orientation:portrait) {
.entry-content,.entry-footer,.entry-header,.entry-summary,.html,.post-thumbnail {
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}

	div.site-header-main {
		height: 5em;
	}

	h1.site-title,p.site-title {
		font-size: 1.6875em;
		margin-left: 3.2em;
		padding-top: .1875em;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}

	.entry-footer {
		line-height: 3;
		padding-top: .625em;
		text-align: center !important;
	}

	.site-footer .social-navigation,div.menu-social-links-container {
		width: auto;
	}

	.social-navigation li {
		float: none;
		height: 1.25em;
		width: 1.625em;
	}

	.site-info {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

@media screen and (max-width:56.75em) and (min-width:20em) {
.site-footer .social-navigation,.site-main,div.menu-social-links-container {
		width: auto;
	}

	h1.site-title,p.site-title {
		font-size: 2em;
		line-height: 1;
		margin-left: 3.5em;
		margin-top: 0;
	}

	.site-description {
		margin-top: 0;
	}

	.post-navigation div+div,.widget,nav.navigation.post-navigation {
		border-top: .125em solid #000000;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}

	h2.entry-title {
		font-size: 1.125em;
		line-height: 1.2 !important;
	}

	div.entry-summary p {
		line-height: 1.1;
	}

	.site-main {
		margin: auto;
	}

	.entry-footer {
		line-height: 3;
		padding-top: .625em;
		text-align: center !important;
	}

	.comments-area {
		float: left;
		margin: 0 7.6923%;
		width: 85%;
	}

	.post-navigation {
		float: left;
		margin: 0 7.6923% 3.5em;
		margin-bottom: 10em !important;
		width: 85%;
	}

	.site-info {
		margin-left: auto;
		margin-right: auto;
	}

	.site-footer {
		text-align: center;
	}

	.social-navigation li {
		display: inline-block;
		float: none;
	}

	.goog-te-gadget .goog-te-gadget-simple a {
		font-size: 1.15em;
	}
}

@media screen and (max-width:56.75em) and (min-width:20.625em) and
orientation:landscape) {
.entry-content,.entry-footer,.entry-header,.entry-summary,.post-thumbnail {
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}

	h1.site-title,p.site-title {
		margin-left: 3em;
	}

	div.site-header-main {
		height: 6.875em !important;
	}

	.site-main #infinite-handle span {
		margin: auto;
		width: 100%;
	}

	.widget {
		margin-bottom: .625em;
		width: auto;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
		margin-bottom: .1875em;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts img {
		margin-bottom: .3125em;
		width: auto;
	}
}

@media screen and (max-width:56.75em) and (min-width:20em) and
(orientation:portrait) {
	html {
		margin-top: 1.25em !important;
	}

	h1.site-title,p.site-title {
		margin-left: 3em;
	}

	div.site-header-main {
		height: 6.875em;
	}

	div.header-image {
		margin-top: 0;
	}

	.entry-footer {
		line-height: 3;
		padding-top: .625em;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}
}

@media screen and (max-width:41.6875em) and (min-width:20em) and
(orientation:landscape) {
	.widget {
		margin-bottom: .625em;
		margin-left: 0 !important;
		width: 100% !important;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}
}

@media screen and (max-width:48.3125em) and (min-width:41.75em) and
(orientation:landscape) {
	.widget {
		margin-bottom: .625em;
		margin-left: 3.4375em !important;
		width: 100% !important;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}
}

@media screen and (max-width:56.8125em) and (min-width:44.25em) {
.entry-content,.entry-footer,.entry-header,.entry-summary,.post-thumbnail {
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}

	.entry-footer {
		line-height: 3;
		padding-top: .625em;
	}

	.widget {
		margin-bottom: .625em;
		margin-left: 3.4375em;
		width: 100%;
	}

	.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
		line-height: 1.25;
	}
}

@media screen and (max-width:64em) and (min-width:56.875em) {
	.entry-footer {
		padding-top: .625em;
		text-align: left !important;
	}

	.jetpack-display-remote-posts h4 a {
		line-height: 1.25;
	}

	.site-main #infinite-handle span {
		background: #6d8ab9;
	}
}

@media screen and (max-width:64em) and (min-width:48em) and (orientation:portrait) {
	.comments-area,.post-navigation {
		float: left;
		width: 85%;
	}

	.post-navigation {
		margin-bottom: 10em !important;
	}
}

@media screen and (max-width:45.6875em) and (min-width:25.6875em) and
(orientation:landscape) {
	.widget {
		margin-bottom: .625em;
		margin-left: 0 !important;
		width: 100% !important;
	}
}

@media screen and (max-width:60em) and (min-width:37.5em) {
	.comments-area,.post-navigation {
		float: left;
		width: 100%;
	}

	.post-navigation {
		margin-bottom: 10em !important;
	}
}

@media screen and (min-width:140em) {
	.infinite-wrap article,.site-main .infinite-loader {
		margin-bottom: 0;
	}

	h1.site-title,p.site-title {
		margin-left: 1em;
	}
}

div#pd_rating_holder_90624_post_76581.pd-rating {
	display: none !important;
}

div.grofile-meta p {
	margin-bottom: 0;
}

div.grofile-meta h4 {
	margin-top: .3125em !important;
}

16 thoughts on “Custom Twenty Sixteen CSS”

  1. This one is too tough for me:

    I want to pad-left 93px to a 768×1024 iPad–portrait orientation.

    I have unsuccessfully tried nearly possibility. Using online iPad emulators, my code seems not to reach the iPad I want. Yet, I am using CSS to fine tune other mobile devices, including my Twenty Sixteen widgets on the 7681024 iPad, landscape orientation.

    I have used various online tools to determine the CSS Media Queries for iPads & iPhones.

    This is one set of the coding I have used:

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .site-main {
    margin: 0 auto;
    padding-left: 90px;
    width: 100%;
    }
    }

    Using Google Chrome inspect on the emulator, I can enter the padding I want and see the change I want. Copy the element to my CSS, save it, then refresh the emulator and nothing changes.

    I have tried with and without the margin and width statement. I’ve tried with and without the WebKit. I do not know of any combination I have not tried. I have spent significant parts of 2 days trying to resolve this problem.

    What am I missing? What am I not doing?

    Thanks in advance. I look forward to applying your solution.

    I think my CSS is visible to you, I also have it available for others to view @ [ http://bit.ly/1Q5s0yw ].

    James [a.k.a. jalexartis]

    The blog I need help with is cyclingexperiences.com.

    So, I asked for WordPres.com Support’s help.

    Like

    Reply

    1. thesacredpath reply

      Hi James, I’m seeing the sidebar move down below the content at 909px and narrower. At 909px, and down to 709px, I’m seeing the content narrower than the white area with a wider margin on the right. At 708px, the content and featured image adjusts to full width minus 7.6923% of left and right padding.

      Can you let me know exactly what you are wanting as the final result and I would be more than happy to help accomplish that. I’m not sure I understand exactly what you are wanting.

      Like

      Reply

      1. Me to him:

        I am delighted you have a response. In portrait mode, to my knowledge, there is no sidebar beside the content. It follows the content in that mode. I am okay with that.

        I want an equal amount of whitespace, left and right of the content area. I think the result at 708px is what I want. That is “min-width”?

        I tried different numbers, but never saw a result. I also search the forums. We are fortunate you are here for us.

        I’ll plug in your numbers.

        Thanks man!!!

        James

        Like

        Reply

        1. Him to me:

          James, this is what I would do so that things look consistent between 909 and 708 pixels in width. Add this to the bottom of your custom CSS and see what you think.
          @media screen and (max-width: 909px) and (min-width: 708px) {
          .entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
          margin-left: 7.6923%;
          margin-right: 7.6923%;
          }
          }

          Like

          Reply

  2. Second Problem–Solved by thesacredpath

    My statement of the problem:

    I want this to happen automatically.

    Padding-left a specific number of pixels, I have perfectly centered te Twenty Sixteen social media icons container on my iPhone & Windows phone, yet they are not centered on several online emulators in either portrait or landscape or both orientations.

    Can this be done with CSS that works for “all.”

    I have also tried “div.menu-social-links-container.”

    Again, TIA.

    James

    The blog I need help with is cyclingexperiences.com.

    Like

    Reply

      1. To which I said:

        Thank you for the reply. Exactly! I am using media queries; but, have not found the code that centers this container without padding for a specific device. that will require recoding as devices change.

        I researched extensively, including the link you provide, before asking. I ask last! Thesacredpath resolved a media query problem yesterday.

        My hope is a Happiness Engineer can at least tell me if what I want to do is feasible or not.

        I’ve done lots of CSS and help others. This is an issue I seek more help than you have given.

        James

        Like

        Reply

    2. Then thesacredpath responds:

      James, there really isn’t a reliable way to detect devices, but you can structure the media queries using a max width that would cover the screen sizes of most mobile devices.

      What I would suggest is the following which will center the footer credits and the social icons on all screens/windows.

      .site-footer .social-navigation, div.menu-social-links-container {
      width: 100%;
      }
      .social-navigation li {
      float: none;
      display: inline-block;
      }
      .site-info {
      margin-left: auto;
      margin-right: auto;
      }

      Like

      Reply

      1. Me back to him

        Your coding does EXACTLY what I wanted for devices I have and emulators I have checked. It is amazing what a few simple lines of efficient code can accomplish.

        Thanks for your diligent work and willingness to resolve problems. I appreciate what you do!

        Your coding as I have entered it in my Custom CSS:

        .site-footer .social-navigation, div.menu-social-links-container {
        /* coding by thesacredpath, WordPress.com Happiness Engineer,
        to center the footer credits and the social icons on all
        screens/windows, 03/18 */
        width: 100%;
        }

        .social-navigation li {
        /* as above, coding by thesacredpath, 03/18 */
        float: none;
        display: inline-block;
        }

        .site-info {
        /* as above, coding by thesacredpath, 03/18 */
        margin-left: auto;
        margin-right: auto;
        }

        Color this support request resolved.

        The best…

        James

        Like

        Reply

  3. Third Support Request:

    I want: “margin-left:0” for the Nexus 5X.

    To have that value assigned the device has to be seen. I have 19 of 20 devices that are seen. I have not used the Media Query the sees this device.

    Full Explanation, with images:

    My CSS:

    @media screen and (device-width: 1080px) and (device-height: 1920px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
    .widget {
    /* Widget placement for NEXUS 5X in landscape mode, 03/18 */
    margin-left: 0 !important;
    width: 100% !important;
    margin-bottom: 10px;
    }
    }

    @media screen and (max-width: 908px) and (min-width: 320px) and (orientation: portrait) {
    div.site-header-main {
    /* shorten site header height so the header image moves up, 03/13 */
    height: 110px;
    }
    }

    @media screen and (max-width: 667px)and (min-width: 320px) and (orientation: landscape) {
    .widget {
    /* Widget placement for moblie device in landscape mode, 03/18 */
    margin-left: 0 !important;
    width: 100% !important;
    margin-bottom: 10px;
    }
    }

    @media screen and (max-width: 773px) and (min-width: 668px) and (orientation: landscape) {
    .widget {
    /* Widget placement for moblie device in landscape mode, REVISED 03/17 */
    margin-left: 55px !important;
    width: 100% !important;
    margin-bottom: 10px;
    }
    }

    /* iPad CODING by thesacredpath, WordPress.com Happiness Engineer, 03/16 */
    @media screen and (max-width: 909px) and (min-width: 708px) {
    .entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
    margin-left: 7.6923%;
    margin-right: 7.6923%;
    }

    .widget {
    /* Widget placement for iPad, NEW 03/16 */
    margin-left: 55px;
    width: 100%;
    margin-bottom: 10px;
    }
    }

    The Nexus 5X parameters are suggested from the Internet. I have used max-width:773px & min-width:411px and many other parameters to apply the widget code to set “margin-left: 0;”

    If this is solvable, I look forward to your help.

    If the Happiness Engineer is thesacredpath, I tried very hard to not have to come back so soon; but, after 2 days with this challenge, my media selector is not firing for the 5X. I am at a loss for a solution. This is a relatively new device, I do not want to blow it off.

    I am fortunate to have 19 working. With thesacredpath and Google Chrom Emulators, I have progressed. For that, I am grateful.

    Thanks!

    James

    Like

    Reply

    1. Surprise, Surprise! It now works and I do not know why. Moving on…

      Please disregard this support request. For reasons unknown to me my desired media query is now firing.

      My post to WordPress.com Forum at 8:15 am EDT.

      @media screen and (max-width: 731px) and (min-width: 411px) and (orientation:landscape) {
      .widget {
      /* Widget placement for NEXUS 5X in landscape mode, 03/19 *STILL WORKING* */
      margin-left: 0 !important;
      width: 100% !important;
      margin-bottom: 10px;
      }
      }

      It would be good to know why the misfiring before and now okay? I’ll take it though. I tried the query above many, many times.

      According to the Google Chrome Emulator, the listed 20 devices work as desired in landscape and portrait modes.

      Thanks!

      James

      Like

      Reply

Leave a Reply to jalexartis Cancel reply

Please log in using one of these methods to post your comment:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Google photo

You are commenting using your Google account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s