Mobile view issues

  • Resolved tja315

    (@tja315)


    8 years, 6 months ago

    Hi ceslava,
    A couple of questions/issues about the mobile view:

    1. It seems that the right side of some of my images are getting cut off in the mobile view. Any tips on how to fix this to optimize site viewing on a mobile phone?

    2. I’m trying to customize my header image and set the height in px to the image height (200px). It looks great in desktop view, but in mobile view the header image overlaps with the menu. When I increase the header height in px, it looks better on mobile but leaves a large white space in desktop view. How can I fix this to look good on both?

    Site is https://www.bestlittlenest.com.

    Thanks so much. ??
    Torey

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author ceslava

    (@ceslava)

    Hi tja315,

    1. I saw the issue on the first img of this post https://bestlittlenest.com/eat-gestational-diabetes-test/ That image is align to the left, edit the post and set the alignment to none. That′ll fix it.

    2. Set the height to auto 

    #header {
    height: auto;
}

    Best regards

    Thread Starter tja315

    (@tja315)

    The header CSS doesn’t seem to have worked. I just added it to my Custom CSS and the logo is still overlapping with the menu bar on the mobile view.

    Also, now my pages are back to the narrower/default width! Not sure how that just happened.

    Here’s what’s in my Custom CSS field; see any reasons why the header wouldn’t be auto adjusting, or my pages are back to the default width? 

    /* navigation bar background */
#site-navigation ul {
    background: #dd9933;
}
/* navigation items background */

#site-navigation #menu-main li {
background: #dd9933;
display: inline-block;
    float: none;
}

/* navigation items hover background */
#site-navigation li:hover {
    background-color: #ffffff;
}

.todocontenido div.focus-post {
opacity: 1;
}

#site-navigation {
    background-color: #dd9933;
}
.widgets-grid-layout .widget-grid-view-image img {max-width: 150px;min-width: 1px;min-height: 1px;

<img style="width:(the real width of the image smaller than 510px)px; margin-left:0"

.entry-content img.alignright, .entry-content img.alignleft {
width: auto;
}

/* center navigation items  */
#site-navigation ul {

    width: 80%;
}
@media only screen and (min-width: 1100px) {#site-navigation {
width:1100px;
margin: 0 auto;
}}
@media only screen and (min-width : 870px) {
#content, .slider, .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed, .author-bio, #content .widget
{ width: 900px;}

#header {
    height: auto;
}
    Theme Author ceslava

    (@ceslava)

    Hi,`

    You have at the bottom of your CSS Custom codes have some typos

    <img style="width:(the real width of the image smaller than 510px)px; margin-left:0"

    That′s why it doesn′t work

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile view issues’ is closed to new replies.