-
Posts
-
Hi !
I’m having an issue with the title container which is responsive to a certain point, but not completely, when I reduce my browser window until it looks like iPad mini and iPhone portrait format -> Text on the right doesn’t go “under” text on the left so they get one into another…
Could you help me resolve this please ?
See the pre-production link : http://eq59799.amanda6.nfrance.com/And just in case, for info, find below CSS I put regarding the title container to adjust as I wanted… in case it’s important for you to have this code…
Thanks a lot !!
Marie/* Reducing title container’s height and vertically align the breadcrumb */
.title_container .breadcrumb {
margin-top: 0;
}#top .title_container .container {
padding: 0px 0px 6px 0px;
min-height: 60px;
}.title_container .main-title {
top: 18px;
}Hey marienoisette!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 767px) { .responsive .title_container .breadcrumb { left: 100%; }}Regards,
YigitHi Yigit,
Thank you very much but I’m afraid it doesn’t help…Here is some other code in my quick CSS, regarding “media screen”…, including the very last one you gave me. If it can help… ?
Thank you again.Marie
/* Responsive menu TABLET */
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
}
}/* Menu and logo not one into another */
@media only screen and (min-width: 767px) and (max-width: 989px) {
.main_menu ul:first-child > li > a { font-size: 11px; }
.responsive .main_menu ul:first-child > li > a { padding: 0 5px; }}/*Hide the menu*/
@media only screen and (max-width: 990px) {
.responsive #header .main_menu ul {
display: none;
}
}/*Show the Mobile Navigation button*/
@media only screen and (max-width: 990px){
.mobile_active #advanced_menu_toggle {
display: block;
}
}/*Title Container breadcrumb – Responsive – iphone ipadmini*/
@media only screen and (max-width: 767px) {
.responsive .title_container .breadcrumb {
left: 100%;
}}Hi!
The code i posted seems to be working just fine. Please flush browser cache and refresh your page a few times. It would be better if you change 100% to 74% in my code
Best regards,
YigitHi Yigit,
Thank you.
I refreshed a few times etc…
It’s better than before indeed but the sentence (breadcrumb?) on the right is not well aligned and it’s “cut”…
Also the container turns “higher” when reducing the window… and so all texts in it are not vertically centered anymore… :(
http://www.mariecarette.com/perso/auxi.jpg
I would prefer to have the same thing that in enfold demo -> breadcrumb on the left, under the title…
http://www.mariecarette.com/perso/enfold.jpg
Would that be possible ?
Thank you so much.Marie
Hey!
Please replace the code i posted previously with following one
@media only screen and (max-width: 767px) { .responsive .title_container .breadcrumb { top: 8px; }}Regards,
YigitOK this is much better :))
The only last detail that upsets me is that Title and breadcrumb are not vertically centered in the container (in the demo they are).
And for the container’s “height” that changes while reducing the window… I suppose it’s because I changed it for the “computer format” no ? (see below). Do I have to change it the same way for “media only screen” ??Thank you Yigit for your help and for your patience…
Marie
/* Reducing title container’s height and vertically align the breadcrumb */
.title_container .breadcrumb {
margin-top: 0;
}#top .title_container .container {
padding: 0px 0px 6px 0px;
min-height: 60px;
}.title_container .main-title {
top: 18px;
}Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) { .responsive .title_container .breadcrumb { top: 15px; } #top .title_container .container { padding: 0px 0px 6px 0px; min-height: 90px; }}Regards,
Yigit
- The topic ‘Title container not completely responsive’ is closed to new replies.