Visual: widget column displays differently for mobile devices

  • Unknown's avatar
    nilla2014 · Member ·

    The content of the widget column displays in one continual ugly column justified left when viewing on mobile devices.

    I understand it’s the size that’s forcing this but is there any CSS I can so that the column displays more aesthetically or at least uses more real estate?
    Any help is appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, you have two rules in your custom CSS that need to be modified. Find the following 

    .site-main .widget-area {
	width:22%;
	margin-right:1.3%
}

    and change it into this. 

    @media screen and (min-width: 1035px) {
.site-main .widget-area {
	width:22%;
	margin-right:1.3%
}
}

    Then find this one 

    .site-content {
	margin-right:25%;
	margin-left:1.3%
}

    and change it into this. 

    @media screen and (min-width: 1035px) {
.site-content {
	margin-right:25%;
	margin-left:1.3%
}
}

    Both appear to have been written to adjust things on desktop sized screens, but were affecting all screen sizes.

  • The topic ‘Visual: widget column displays differently for mobile devices’ is closed to new replies.