Hi,
I'm having a problem with the navigation bar.
The navigation bar on desktop view looks better inside a <div class="container">. However, on mobile it looks better if I use <div class="container-fluid">
Is it possible to have change the class when user is on mobile, or is there any other solution?
Thank you for your help.
www.nextbitusa.com/zh/temp.html
I'm using container-fluid now, but it doesn't look good on a large display.
But container-fluid is how I want it to be on mobile.
Thank you
I think I fixed.
@media (min-width: 1200px) {
.container-fluid {
width: 1170px;
}
}
Thank you
Hello,
You can also consider using the data-class Feature! You can use the following code to see how the buttons changes the Classes on Different Responsive Devices:
<a href="#" class="button" data-class-lg="button-large" data-class-md="" data-class-sm="button-xlarge" data-class-xs="button-small" data-class-xxs="button-mini">Button</a>Make sure that you define all the Responsive Classes attributes for all Devices to make sure that they work uniformly on all Devices.
So consider using the following code for the Containers:
<div class="clearfix" data-class-lg="container" data-class-md="container" data-class-sm="container" data-class-xs="container-fluid" data-class-xxs="container-fluid">
...
</div>This should surely work fine. Let us know if we can help you with anything else or if you find any other issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard