4 issues. Need help

andresand

Hi!

I have some issues that I can't seem to solve.

1.) When I resize the window of the browser, I get the following results when the website resizes according to the browser size.

http://imgur.com/Hcu8Hmy   pic (1) -- Full window - Looks good

http://imgur.com/PKBZn0p    pic (2) -- notice the dropdown meny button, (where the red arrow is pointing), how do I change the color of that one to black?

2.) 

http://imgur.com/MznVkNF    http://imgur.com/t3MpOX4        pic (3) and pic (4) -- Notice the difference in the header picture in 3 and 4, that the orange header picture "zooms in" upon clicking the menu button. How do I stop this from happening?

3.) 

Pic 1 to 4 - 

1 http://imgur.com/CW7GwZJ

2 http://imgur.com/aurtPnE

3 http://imgur.com/neun76u

4 http://imgur.com/zSyPTCP

Notice how the website changes from 1 to 4 in the pictures as I resize the window.

1 looks good, 

then 2 and 3 looks kinda strange, 

then 4 looks good again. 

It seems the website uses 4 different steps depending on how I resize the window on my computer. Is there a way to “bypass” step 3 and 4 , and only have it so that the standard look is as pic 1, and then as I resize the window it directly goes to the style as it looks on pic 4? Or maybe somehow force the website to keep the appearance as pic 1 is?

 4.) In this pic, 

http://imgur.com/G0jtqmX

I want to add padding to the where the red arrow is pointing (“Vi tar fram rätt fakta”, etc, and the 3 pictures below, so that they are in line with the red arrow below, in other words in line with the text “Validitet”, “Freedom to Operate” and “Archive Online”. I first tried a place holding item, but it pads to much. How do I achieve this?

Bryan

Hello,

Please send a link to your website and also check all the screenshot links since most of them are not working. Try snag.gy for uploads

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

Ok I have uploaded to SnaggGy instead. Hopefully it works now.

The link to my website is :  www.servion.se

For the ease of it I will copy my question and replace the pic links

—————————————————————

Hi!

I have some issues that I can't seem to solve.

1.) When I resize the window of the browser, I get the following results when the website resizes according to the browser size.

https://snag.gy/2H391Z.jpg  pic (1) -- Full window - Looks good

 https://snag.gy/c0fdtX.jpg  pic (2) -- notice the dropdown meny button, (where the red arrow is pointing at “MENY” in orange), how do I change the color of that one to black?

2.) 

 https://snag.gy/VYQDei.jpg    pic (3) and pic (4)  https://snag.gy/ep1X42.jpg

-- Notice the difference in the header picture in 3 and 4, that the orange header picture "zooms in" upon clicking the menu button. How do I stop this from happening?

3.) 

Pic 1 to 4 - 

1 https://snag.gy/Hfvatd.jpg

2 https://snag.gy/MSltPy.jpg

3 https://snag.gy/GisYD3.jpg

4  https://snag.gy/74cban.jpg

Notice how the website changes from 1 to 4 in the pictures as I resize the window.

1 looks good, 

then 2 and 3 looks kinda strange, 

then 4 looks good again. 

It seems the website uses 4 different steps depending on how I resize the window on my computer. Is there a way to “bypass” step 3 and 4 , and only have it so that the standard look is as pic 1, and then as I resize the window it directly goes to the style as it looks on pic 4? Or maybe somehow force the website to keep the appearance as pic 1 is?

 4.) In this pic, 

https://snag.gy/Ygl5xU.jpg

I want to add padding to the where the red arrow is pointing (“Vi tar fram rätt fakta”, etc, and the 3 pictures below, so that they are in line with the red arrow below, in other words in line with the text “Validitet”, “Freedom to Operate” and “Archive Online”. I first tried a place holding item, but it pads to much. How do I achieve this?

andresand

I see some pictures still are not working, but perhaps you can see the issues on the website link I wrote.

I'll try and explain where the images didn't work.

On 1. ) see this pic instead because the other one is not working. https://snag.gy/ep1X42.jpg

Notice the ''MENY" in orange in the top left corner? How do I change that one to black?

on 2.)  the header image zooms in when I make the browser window very small upon clicking on the "MENY" button. First it looks as it should, but as soon as I click and the menu comes down, the header (orange water color like header) zooms in.

Bryan

1. Use this css

#Top_bar a.responsive-menu-toggle span {
    color: black !important;
}

2. Use this css

@media (max-width:767px) {
body:not(.template-slider) #Header_wrapper {
    background-size: 100% 60px !important;
background-position: top center; } }

3. You need to place a 'divider' item after each column item to create rows, this way they will not 'fall off'

4. You can edit the wrap and set the padding there, see screen: http://prntscr.com/f66qeq

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

One quick question. In 2.) shall I replace @media with the name of the picture? I tried both the title and the url, but it didn't work. 

 And if I just tried "@media" as written, upon clicking the the menu, the orange picture became purple.

https://snag.gy/92FPvK.jpg  before clicking

https://snag.gy/fNnwDk.jpg After clicking 

andresand

On 3.

I added a divider, and it helped, but I still have issues with the text spacing the the pictures.

Resizing the browser a little I get this--  https://snag.gy/G9rbfz.jpg --- notice the spacing of title of "nyhetsundersökning" and "freedom to operate"? How do I stop this from happening?

Resizing the browser a little further  I get this --- https://snag.gy/RFamwQ.jpg --- here the spacing of the titles looks good, but the images look weird. How can I fix this?

Bryan

2. I just edited the css above, please only copy and paste, do not change it.
3. Add this css

@media (max-width:1239px) {
h2 {
	line-height:22px !important;
}
.list_item .list_left { 
	overflow:visible !important;
}

.list_item .list_left img { 
	width:100% !important;
} }

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andresand

You guys are magicians!! Everything is solved. Thank you very much for your support! You guys rock!  ^:)^    ^:)^   ^:)^