How to position elements ?

[sloups]

Hi, I am new here and struggling a bit. I use the Sample Genesis theme as a child theme.

On this page: http://paulheartfieldphotography.com/
2 Questions:
1) How to I make sure the image of the man (the first image for instance) is wider (the original image is 1000px wide, but it appears as 740px wide on the site)?

2) How do I reduce the space between the sidebar on the left and the above-mentioned image? For that one I have reduced the width of the sidebar, as well as removed padding on the sidebar. I have tried reducing padding for the image, but obviously nothing works. I suppose it is a class/style applied to the whole container and I can't find it. Or do I have to use Hooks? I looked into them quickly and felt like they are used to add elements, not re-position them.

Even if you can not answer my question, could you point me to the basics of re-positioning elements in Genesis please?

Many thanks!

http://paulheartfieldphotography.com/

[Victor Font]

There's no special technique for positioning elements in Genesis. Positioning is controlled by CSS as with any WordPress theme or website for that matter. When I look at the page's source code, all of the wraps are missing. It appears that someone made an attempt at customizing the HTML markup. What happened to the wraps? Removing the wraps and changing the markup can throw things off. Also, it looks like you're trying to use a full-width template without using the built-in full-width markup.

The content area is 800px wide and you are floating it to the right. If you want it wider, change the .content CSS to make it wider. You are also displaying a featured image that is just 211px wide. If you want the full image, you have to display the full image.

The sidebar is 200px wide and you are floating it to the left. All the space in between the sidebar and content is dead space. You reduce the space by making the content area wider. Use a percentage for width instead on px otherwise you could run into issues for different sized screens.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[sloups]

Hi Victor:
Thank you so much.
I have only changed some CSS and added plugins (I just removed the Site Origin plugin that was meant to help me layout pages and might have cause the issue, although I doubt it). I am not sure what you mean by removing the wraps (I see what they are but I can't see why they'd be removed).
I have increased the size of the content area (the one I want to move left) ., but all it does is increase its size to the right, not move it to the left. I have tried this in the Sample genesis theme: I have increased the "width" of the Content element in the CSS developer tool (and decreasing the width of the sidebar on the left). This does not move the Content area to the left. I have tried using both % and px.

I am surprised by your comment on the full image. The image is a full image, (originally 1000 wide, but it is reduced to 740px when the content area is small).
I am surprised but the full-width comment a well. I suppose it's my mistake but I do not know how to fix it.

Well, thank you and wish me good luck. Still no solution.

[sloups]

I have looked into it and I have the impression the problem might come from styles applied by the Genesis framework (?)

In this article, Bill Erickson advises to remove the styles for the main content area for full-screen homepages, using PHP. He mentions wraps in the Sample Genesis theme I'm using as well.
http://www.billerickson.net/full-width-landing-pages-in-genesis/

I (sort of) worked around the issue by adding "genesis" before the classes in my CSS. - IF anyone has advice on this, please let me know.
The image is still not at full width, so more work to come.

My css as of now:
[CSS]
#genesis.content-sidebar-wrap {
width: 1400px;
}

#genesis-sidebar-primary {
width: 200px;
}

#genesis-content {
width: 1000px;
}

#genesis-content img {
max-width: 100%;
height: auto;
padding: none;
}
[CSS]

[Author]

Posts