sorry – with copy text i´ve ment the normal “paragraph” style.

Hi 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 Yigit,

I do not understand that line: would that affect the font size? I just want to affect (reduce) the lenght of the lines.

I fixed it by placing this to the top:

#top .main_menu .menu li a { font-size: 18px; color: white; background-color: #4787f3; }
#top .main_menu .menu li a:hover { background-color: #4787f3; color: grey; }

#top .header_color .main_menu .menu ul li a{
background-color: #ffffff;
color: #4787f3;
font-size: 17px;
}
#header_main {
background: #4787f3;
}

Now the only issue still is:
try changing it to tablet size and watch the menu bar get ugly

and then mobile and click on the menu and things get even more goofy

thanks Ismaiel, I’ll try the above…. sorry the sidebar menu changed in the interim today – I couldn’t work it out so had to try another solution – with individual widget sidebar menus – which again I”m not happy with the styling…. any ideas for changing those?
thanks!

*edit* the font issue got resolved when I switched to a stretched layout. I am happy with the way it’s looking now so don’t worry about troubleshooting, but if you have any general words of wisdom you want to share, I am always interested in expanding my knowledge of internet wizardry. *end of edit*

*edit2* I spoke too soon. Stretched layout makes it look really crazy and the font still changes. I think it might have been a page cache thing that made it look good until I cleared it. *end of edit 2*

Original comment:
“Thanks for the direction Yigit!

I got the size right but it looks like the font changes at the break points now. (https://eidyial.com) Any idea how to fix it? I kinda had to hack it using quick css to get it right because I don’t really know what I’m doing. The header wasn’t matching the container width so I improvised. Something in the following css is causing the font issue (the first empty media screen thing made it so the font change only happened at one point):

@media screen and (max-width: 989px) {
}

@media screen and (min-width: 989px) {
#wrap_all {
max-width: 960px;
margin: 0 auto;
}

@media screen and (min-width: 1140px) {
#wrap_all {
max-width: 940px;
margin: 0 auto;
}

I’m sure I could probably get rid of this mess entirely and change a value in grid.css to match the size but i’m having trouble finding the right number or numbers to change. If it’s not too difficult to implement in one of the future updates, I think it would be really useful to offer more width options or like an overall max-width selector in the settings section for novices like myself.

Best regards,
-Arthur”

• This reply was modified 11 years, 11 months ago by agutnov.