Ok, it works now but with a problem still…

The full code I have for the blue_bar section is:

div#blue_section {
height: 32px;
min-height: 32px;
}

#blue_section .container {
   padding-left: 120px!important;
}

@media only screen and (min-width: 990px) {
#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}}

@media only screen and (max-width:480px) {
  #blue_section .container {
   padding-left: 70px!important;
}}

@media only screen and (max-width: 1024px) and (min-width: 990px) {
#blue_section .container {
   padding-left: 0px!important;
}}

The new problem is when I rotate my mobile from portrait to landscape, it is no longer aligned with the logo in landscape…
But I guess this will be impossible to fix as there are so many screen size combinations? Please confirm.

Hi Yigit,

If I remove that code it fixes on mobile but it damages the PC version (i.e. the text goes to the left on PC screens)

This is the code I have now:

@media only screen and (max-width:480px) {
  #blue_section .container {
   padding-left: 30px!important;
}}

#blue_section .container {
   padding-left: 120px!important;
}

Great Yigit,

It is perfectly aligned with the logo when I change it to 100px, on computer screens.

However, on mobile it is a bit to the right. Is there a way to create a rule to align it on mobile devices as well?
Please check the sshots in PVT

Many thanks

Great Yigit,

The blue bar is now moving on mobile perfectly fine :)

Only problem is with the text alignment. Is it possible to have it perfectly aligned with the logo? The text is centred on the “page” but should be centred with the logo width only.

Thank you

Hi Yigit,

Unfortunately this didn’t produce any results. I’ve cleared Safari’s cache on my mobile to test it.

Thanks

Perfect Yigit, many thanks for your help.

For future reference. Is there any code generator for the font calling code added on my CSS file?

@font-face {
	font-family: 'Helvetica Neue';
	src: url('fonts/HelveticaNeue-Thin.eot');
	src: url('fonts/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
		url('fonts/HelveticaNeue-Thin.woff') format('woff'),
		url('fonts/HelveticaNeue-Thin.ttf') format('truetype'),
		url('fonts/HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
}

Or is this a “manual” code that we need to apply on every custom font?

Thank you

Hmmm…

All points are ok, except the last one regarding the font.

Even if I add Raleway (which is a Google font), it doesn’t work. Do I really need to add font as a custom font? Is there a way I can use an alternative Google font or embed it on CSS directly without messing up with the custom font instructions? (They seem too complex for my skill-set).

Thank you Andy and Yigit

Hi Yigit,

This is the code I have now for the blue_section:

div#blue_section {
height: 32px;
min-height: 32px;
}

#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}

But it messed up the bar a bit.

Hi Yigit,

Thanks for your contribution.

Please look to the website (in Private).

I simply want the blue bar below the header permanently fixed with 2 words below the logo (and centered with the logo).

Many thanks.

PS – If you have a chance to look into my other post here, I would be very grateful :)

Please check the URL in private.

We can not have the text 100% aligned with the logo as we would like to. Is it possible to move it like 1px to the left and 1px to the right? What is the code that I can use for this?

Thank you

Some other related questions with the fullscreen slider (please consider these ones as priority than my first topic):

1) How to increase the padding (i.e. the area between the text and the edge of the caption’s background: http://dns.d.pr/vCIm/23BdHXze

2) (I guess this is not possible, please ignore if I am right).

3) How can we add some rounded corners in the caption box?

4) How can I add the font Helvetica Neue Thin to the captions on the slideshow only? Do I need to import the font? I tried to follow some instructions in other posts but without success…

Thank you

Thanks Andy, will do.

In addition to the above, I just found another glitch with one vertical line between the portfolio items that is thicker than all the others.
Please check in PVT the URL and the sshot where you can see the line between the 3rd and 4th row slightly thicker than all the other lines.

I tested this in 4 different browsers: Chrome, Safari, Firefox and Opera. All have both problems mentioned.
I tried this on two screen resolutions: 1920×1080 px and 1440×900 px and it applies to both of them.

Many thanks if you can find a away to solve these issues.

Hi Andy,

I believe you can see the difference in the line’s thickness.
Check the green arrows pointing out to the thick lines and the orange arrows pointing out to the thinner ones.
The red arrow shows the intersection where lines are not intersecting properly: http://dns.d.pr/1d4Wx/2qE48hPY

I think what happens is that when one logo grid overlaps another the line from the logo above / below overlap with each other, hence the thicker line. I am not too worried about the lines’ thickness anyway but more about the intersection (red arrow) that does not seem to be right (not aligned).

Check the URL in private.

Thank you