Template and k2 gets messed up after update: Page 6

Template and k2 gets messed up after update

teitbite

starlight Hi. Ach, sorry my bad iw as for screens bigger than 1200px and not as I thought smaller. Leave it like it's not and add those 2 classes:

@media only screen and (min-device-width: 1200px)
.navbar .container {
width: 1170px !important;
}
}

@media only screen and (max-device-width: 1199px)
.navbar .container {
width: 100% !important;
}
}

starlight

teitbite now its like this, is it correct or should I delete some lines:

.container{width:1170px;}
.top-social .custom{padding:5px 10px !important;} /* adjust padding value accordingly */
@media only screen and (min-device-width: 992px) and (max-device-width: 1200px) {.navbar .container{width:970px !important;}} /* adjust width value accordingly */

@media only screen and (max-device-width: 992px){.navbar .container{width:100% !important;padding:0 15px !important;}}
@media only screen and (min-device-width: 1200px){.t3-mainbody{width:984px !important;}}
.navbar .btn{margin-top:0 !important;}
.navbar .nav > li > a{text-shadow:none !important;}
.row{margin-left: -15px !important;margin-right: -15px !important;} /*fixing sidebar block going out of alignment*/
.navbar-nav > li > a{line-height:30px !important;} /* adjust value accordingly for getting menu-nav height right */
.logo-image a {left: 40px !important;}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle{background:#0b70a5 !important;color:#fff !important;}
nav#t3-mainnav .navbar-header .btn{margin-top: 5px !important;}
.t3-megamenu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li a,.t3-megamenu .mega-nav > li.divider, .t3-megamenu .dropdown-menu .mega-nav > li.divider{margin: 0 15px;}
.even,.odd{border-bottom:1px dotted #ccc}
div.k2ItemsBlock ul li a.moduleItemTitle{font-weight:500 !important;}
.top-social .dropdown{right: 50px !important;top: 15px !important;}
.logo-control .logo-img-sm{margin-top: 23px !important;}
.top-social .dropdown .btn{background-color: #fff !important;background-image:none !important;}
body{padding-left: 0 !important;padding-right: 0 !important;}

@media only screen and (max-width:1200px) {
.top-social .custom {
    background: #fff;
}

.t3-mainbody {
    width: 1170px !important;
}
}

@media only screen and (max-width:1169px) {
.t3-mainbody,
.container {
    width: 100% !important;
}
}

@media only screen and (min-device-width: 1200px)
.navbar .container {
    width: 100% !important;
}
}

@media only screen and (min-device-width: 1200px)
.navbar .container {
width: 1170px !important;
}
}

@media only screen and (max-device-width: 1199px)
.navbar .container {
width: 100% !important;
}
}

teitbite

starlight Hi. No need to delete anything. A great thing about CSS that it can overrides classes. Are You sure everythign is ok now? Can I close this thread?

starlight

teitbite Ok, the issue is not solved. Please check the site.

teitbite

starlight Hi. There was a syntax error in custom.css file, so the code I was giving You wasn't actually used.

Also corrected one mistake the developer made in first line, changed:

.container{width:1170px;}

.container{max-width:1170px;}

starlight

teitbite Thx! At around 1175px in width there is a gap between the break points where the problem is still present. Is possible to fine tune the values for this break point?

Secondly, now the menu in responsive mode is completely empty.

teitbite

starlight Hi. For the menu I think some bootstrap is overriding that. Force ti with:

@media only screen and (max-width:1200px) {
.off-canvas-effect-4.off-canvas-open .off-canvas-effect-4.t3-off-canvas {
    display: block !important;
}
}

starlight

teitbite Thx! That code fixed the menu. Any solution for the other issue?

Thx! At around 1175px in width there is a gap between the break points where the problem is still present. Is possible to fine tune the values for this break point?

Also, I just noticed that the site displays correctly on my mac, but on the phone the menubar is not correct. You can see the same problem in chrome's built in responsive view.

teitbite

starlight Hi. I cannot recreate the small screen screenshot, but the 1175px thing should be ok now.

aman204

starlight Also, I just noticed that the site displays correctly on my mac, but on the phone the menubar is not correct. You can see the same problem in chrome's built in responsive view.

For this, You may try change the padding value here to 0 in CSS in custom.css file :

@media only screen and (max-device-width: 992px){.navbar .container{width:100% !important;padding:0 15px !important;}}

starlight

aman204 Thx, that worked!

There are just a few small adjustmenst left that would be great if you could help me with:

The logo size in the responsive view should be a little smaller, so that it does not push the site down. See screeshot:

The social media button next to the hamburger button does not become grey when it is hoovered, like the hamburger button. Can you give me a code to hoover grey like the hamburger button?
From 992px to 980px the hamburger button moves. Is it possible to fix that?
Is there a CSS you can give me to change the font size for the paragraph text?

aman204

starlight Hi

1) Unable to replicate the relative issue as shown in your screenshot on both, responsive emulator and in real-time. Ref: Screenshot from phone

2) Try add this :

.top-social .dropdown .btn:hover{background-color:#e6e6e6 !important;}

3) Try add this also :

@media only screen and (min-device-width: 980px) and (max-device-width: 992px){nav#t3-mainnav .navbar-header .btn{margin-right: 25px !important;}}

4) To be precise, Kindly provide screenshot of paragraph you wish to refer to

starlight

aman204

1) That is weird, I see it both on my S8+ and responsive emulator in chrome. See screen shot:

2) Fixed.

3) It seems like the code dit not fix it. See the above screenshot. But you may check on the site directly as well.

4) This text:

aman204

starlight Hi

1) Having reviewed now in Google responsive emulator however unable to replicate the same so I am afraid that unable to provide any inputs until the relative issue as shown by you can be replicated here. Ref: Screenshot
3) You may check now. Have changed the suggested media query CSS a bit in the CSS file and the same appears to work as envisaged
4) You can try add this and change font-size accordingly which you wish to change the font-size globally for all paragraphs in site which have this CSS selector appended :

div.itemFullText p{font-size: 16px !important;}

starlight

aman204

I have tested on total 4 phones now. Its only displaying like that on 2 of 4 phones, and both of them are galaxy s8. Can you try to give me a general CSS to define the size of the small logo? Maybe if I make it a little smaller the issue gets fixed.
Now it looks like this on that spesific widht (not in the emulator, but direct in chrome):

That worked!

aman204

starlight 2) You may adjust the margin-right value accordingly in the CSS to get the element to position appropriately for certain screen-size :

@media only screen and (min-width: 980px) and (max-width: 992px){nav#t3-mainnav .navbar-header .btn{margin-right: 27px !important;}}

starlight

aman204 Thx! I changed it to 13px and it is displaying correct in the browser, but in the chrome responsive emulator it is now displaying a extra big gap. Why is it displaying different and what is correct?

aman204

starlight but in the chrome responsive emulator it is now displaying a extra big gap

Having reviewed in both Chrome and firefox responsive emulator, Setting 27px makes it appear fine for both.

Also, Would suggest to try to check in realtime on standard devices as responsive emulator can be deceiving at times and may differ from actual output.

starlight

aman204 I have set it to 28px now, but it does not display as you suggest, please look here and tell me if I am doing something wrong: https://www.useloom.com/share/25ff9b61c6d2431298ba644856320f33

aman204

starlight As suggested earlier, Would suggest to kindly try to check in realtime on standard devices. The element positioning should be fine in standard device in realtime which should be of primary importance

starlight

aman204

I only have my mac / pc to check that size with, and there it is displaying incorrect.
Can you try to give me a general CSS to define the size of the small logo?

« Previous Page Next Page »