Trying to get image in article page full width.

[camind]

Hi guys,

Tried to do this myself and searched the forum but cant seem to find anything.

1: I’m trying to make an image in the article body become the entire width of the page once the sidebar disappears. css to make all images full width in article body would be great.

2: Can the side padding be controlled for mobile view? right now padding is a little bit to large and makes content look small and crunched. Make content wider or padding thinner….which ever way you want to look at it.

Thanks

[David Martin – Support]

Hi,

1)

What page URL is this for, images will do this as standard.

2)

Yes, you can adjust it to match your needs, this is its standard value:

@media only screen and (max-width: 767px) {
.container {
    padding: 0 30px;
}
}

Changing this will affect all other sections of your site using the container class, so only do this if you are confident it’s correct for your content.

Thanks,
David.

[camind]

Hi David,

# 2. So by using your code i was able to fix question #2. but when doing so I realized that the sidebar for some reason is not centered correctly… I looked all over in the code to see if there was something that had more padding on one side of the sidebar then the other. I couldn’t find any padding errors. So only way I was able to fix the issue was to add this code below.

@media only screen and (max-width: 767px){
.right-sidebar .sidebar-widget-wrap {
padding-right: 5px;!important;
}
}

Without the code above the sidebar isn’t centered in mobile even though everything else above it is centered.

So question is…. can this be fixed without adding the above code?

#1…. will attach a screen shot of what i mean ..hard to explain. Basically a simplified explanation would be…. Is it possible to have the images go beyond the .container and have 0 padding so the image goes completely side to side while the article body and everything else stay in the container and stay at the specified .container padding value? Tried doing this myself but can’t seem to figure out a way. see screen shots.

Thanks for all the help 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

1) This would not be reliably possible as the images within your posts are within a parent container which is a set percentage of the page. The only solution would be this, which would work for you images within a <p> tag within a post.

@media (max-width: 992px) {
 
#page-wrap {
    overflow: visible!important;
}

.entry-content p > img {
    margin: 0 -50%;
    width: 200%;
    max-width: none;
}

}

2) As mentioned changing the container will change all other areas of the site, meaning you will need to make tweaks in many places.

Thanks,
David.

[camind]

David,

#1 Thanks so much for the info and your time 🙂

#2. I totally agree with you but sidebar was not center before the custom css. The custom css just made it noticeable since a difference of 5 px in one direction is hard to notice if the padding is so large. Once padding was reduced a 5px off center was very noticeable. Just trying to figure out why the sidebar was not centered to begin with? Any idea?

Thanks alot

[David Martin – Support]

Hey,

1) No problem!

2) If I remove your CSS, your sidebar looks normally centered. Maybe I am not seeing the specific section you are viewing. Can you add a screenshot for this? This is just for small screen size, such as mobile?

– David.

[camind]

David,

Correct only visible on mobile…. The off center amount is only about 5-7px so its hard to see anywhere other then mobile…. I have attached two screen shots. One with custom css applied to fix the 5px off center and one without any custom css.

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

If I remove your CSS, it looks like this line caused the issue:

.sidebar.right-sidebar {
    padding-left: 20px;
}

We can stop that on mobile and then adjust the sidebar padding to look correct using the below:

@media only screen and (max-width: 767px) {
.sidebar.right-sidebar {
    padding: 0 15px;
}
}

Thanks,
David.