responsive design error @ 600px

Home Forums Spacious Free responsive design error @ 600px

This topic contains 5 replies, has 3 voices, and was last updated by  Rajesh 1 month, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1371995

    Frank
    Participant

    Hi,

    while using Spacios 1.51 and Autoptimize plugin I noticed a bug at 600px. It depends on the design layout used with spacious theme, so not visible on every website.

    Only at 600px width the screen size on mobile gets shrinked and a blank area appears at the right side of the screen.

    Please take a look at the spacious css:

    @media (min-width: 600px) and (max-width: 768px) {
    	.better-responsive-menu #header-logo-image {
    		float: left;
    		margin-bottom: 0;
    		margin-right: 10px;
    	}
    	.better-responsive-menu #header-text {
    		float: left;
    		margin: 13px 0 0;
    		text-align: left;
    	}
    	.better-responsive-menu #header-left-section {
    		float: left;
    		margin-top: 10px;
    	}
    
    }
    
    @media screen and (max-width: 600px) {
    	.better-responsive-menu #header-logo-image {
    		display: inline-block;
    	}
    	.better-responsive-menu #header-text {
    		display: inline-block;
    		float: none;
    		margin-top: 12px;
    		vertical-align: top;
    	}
    	.better-responsive-menu #header-left-section {
    		padding-top: 10px;
    		text-align: center;
    	}
    }

    There are overlapping entries for 600px, so I think that is the reason for this.
    Can you check this, please?

    regards, Frank

    #1372247

    Ashish
    Moderator

    Hi Frank
    Thanks for informing us about this.

    For now, you can fix it by adding following code inside Appearance > Customize > Additional CSS :

    
    @media screen and (max-width: 600px) {
            .better-responsive-menu #header-text {
                 display: block; 
            }
    }
    

    We’ll release a new update with a fix soon.

    Regards,
    ThemeGrill Support Team.

    #1372265

    Frank
    Participant

    Hi,

    this works perfect!

    Thank you for your good support.

    Frank

    #1372508

    Rajesh
    Moderator

    Hi @Frank,

    Glad to know your issue is resolved. If you need further assistance please let us know.

    Thanks.

    #1373071

    Frank
    Participant

    Hi,

    think I need further assistance… :-/

    After updating to 1.52 some bugs were gone but now I discover other changes.

    In better-responsive mode >600 the menu content gets centered, it was left-aligned before.
    http://www.directupload.net/file/d/5097/2o36ihm9_png.htm

    And when screen gets bigger >600 the hamburger is not right aligned anymore but moves under the search bar
    http://www.directupload.net/file/d/5097/vt4qzlfh_png.htm

    Also I found some double css:

    @media screen and (max-width: 768px) {
    ...
    	.better-responsive-menu #site-navigation {
    		float: right;
    		margin-top: 10px;
    		padding: 0;
    	}
    ...
    	.better-responsive-menu #site-navigation {
    		float: left;
    		margin-top: 0;
    	}
    ...
    }

    I was able to change the style css to solve this somehow ;-), but I think it’s better (also for the other users) to get this fixed with an update.

    Best Regards, and many thanks for your support!

    #1373189

    Rajesh
    Moderator

    Hi @Frank,

    Thank you for your concern. We will check and fix this in our next update.

    Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.