4 issues. Need help

Comments

• Bryan

  May 2017

  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

  May 2017

  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

  May 2017

  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

  May 2017 edited May 2017

  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

  May 2017

  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

  May 2017

  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

  May 2017

  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

  May 2017

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