Blog ~ Twenty Sixteen Theme Cascading Style Sheet [CSS], 03/19

Here we go again…

Fullscreen capture 3192016 63104 AM Nexus 5X2016-03-19_6-45-02Nexus 5x Hit

With the help of thesacredpath, a WordPress.com Happiness Engineer, and the magic of CSS, using Google Chrome Emulator, I have my blog viewable with all the devices listed above except the Nexus 5X.

Using Chrome Inspect, I see the Nexus 5X continues to hit the 733px x 668px device [right] from my CSS Media Query for devices I want to have a margin-left of 55px..

I view the coding I am using [below] as sets. It happens the 5X’s dimensions fall within a one of the sets of Media Queries previously defined, thus the misses–no fires.

I have tried every combination I can think of. It is time to [reluctantly] ask for help again.

My Media Queries that allow me to see “properly” 19 of 20 mobile devices are below.

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

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

Author: jalexartis

Avid cyclist, who loves photography, technology, blogging & cooking...

Your comments please...

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s