margin and image full width

• 

  usinarevista · Member · Apr 18, 2017 at 5:05 pm

  • Copy link
  • Add topic to favorites

  Hello everyone,

  I have a question that regards my website’s width. With default zoom on my browser (firefox) it has a very wide margin on both sides. Is that so it can respond and adapt to different screens? I was wondering if it’s possible to set it full-width, like this web-site here: http://rascunho.com.br/dois-chamados-ao-paradiso/

  Also,I’d like to know if the background image with “ensaios e resenhas” that fades out as the page scrolls down is possible to make with CSS, or is that some JavaScript code?

  Thanks a lot!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 18, 2017 at 7:54 pm

  • Copy link

  I have a question that regards my website’s width. With default zoom on my browser (firefox) it has a very wide margin on both sides. Is that so it can respond and adapt to different screens? I was wondering if it’s possible to set it full-width, like this web-site here…

  Are you talking about for the featured post section at the top of your site?

  Also,I’d like to know if the background image with “ensaios e resenhas” that fades out as the page scrolls down is possible to make with CSS, or is that some JavaScript code?

  Yes, that is typically done with Javascript and is called a parallax affect. There are some sort of rudimentary CSS only versions, but with the structure of the Sight theme, I can’t see a way to make that work.

• 

  usinarevista · Member · Apr 19, 2017 at 12:55 am

  • Copy link

  Hi thesacredpath!

  No, I mean the whole website’s white margin. Roughly, I’d say that with the default zoom on my browser it has 200px at each side of the featured slider, and way more on the posts, for instance.

  I see… I was trying to do some of the parallax on the sidebar, scrolling than fixing it, but it couldn’t be done with CSS too. But I was wondering if within a single post, where I have more control of the HTML/CSS structure, is it possible to set an image full width, and by that I mean without the white margins, and than add the parallax to it?

  Just so it’s new for me, I’m not aware of its possibilities on my theme…

  Again thanks a lot for your help :)

• 

  dcoleonline · Staff · Apr 19, 2017 at 4:21 pm

  • Copy link

  With default zoom on my browser (firefox) it has a very wide margin on both sides. Is that so it can respond and adapt to different screens?

  It helps to keep the lines of text in the content area easily readable on large screens. If the text were to stretch completely across a large monitor, it would be hard to follow. In the example site you sent, the paragraphs are limited to 640px wide to keep the lines readable. By default, the Sight theme’s blog post paragraphs are 610px wide.

  I was wondering if within a single post, where I have more control of the HTML/CSS structure, is it possible to set an image full width, and by that I mean without the white margins, and than add the parallax to it?

  So as thesacredpath was mentioning, the structure of the Sight theme wouldn’t allow you to accomplish a full width image within the body of the post. Also, the specific effect of the collapsing image in at the top of your example requires Javascript code, which wouldn’t be possible to add to a WordPress.com site. However, if you’re open to looking at other themes, you might like how TwentySeventeen or Lodestar display their posts with large images at the top above the post content.