Is there a way to have the responsive/mobile header logo and toggle menu adapt to the browsers edge? I have attempted the following but it obviously effects all the content containers wrapped in the #wrap_all which is undesirable. I would like to keep all the other containers with their default max-width:85%.
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%;
max-width: 100%;
}
}
Sorry I just figured it out using the following code in case anyone is trying to do the same. If you think this may break something visually please let me know but it looks good so far.
/* set responsive header to adapt to browser edge */
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%;
max-width: 100%;
}
/* keep all .container(s) in #main at default width of 85%*/
.responsive #top #wrap_all #main .container {
width: 85%;
max-width: 85%;
}
}
Hi!
Good to hear you found a solution! Let us know if there is anything else you need assistance with.
Cheers!
Jordan