How to create full size featured image on pages for Dazzling theme

Dazzling
1

Hello,

Is it possible to have an image touching the edges of browser window like the images of a slider? How to do that? Also need the image to be responsive.

Thanks.

2

Hi @dollyshah132,

I hope you are well today and thank you for your question.

Are you talking about the image displayed on single post or page?

Could you please share the page URL from your site where you are displaying the image so that i can help you to make it full width?

Kind Regards,
Movin

3

Hi Movin,

Thanks for the prompt response. This is the URL: http://testing.excellworldwide.com/
So the image at bottom on home page, is the one I’m talking about. Would be great if it can bleed out to the browser window. Thanks.

Regards,
Dolly

4

Hello, I’d like to know the exact same thing. I have made a home page and an about page. My about page shows a big picture across the top but I’d like for it to spread across the whole top part (like on my home page).

Is there a way to widen this? Better yet, is there a way to get rid of the “wrapper” completely?

thanks,
twygee

5

Hi Dolly,

Thank you for sharing your site URL.

You can achieve this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

body.home .row {
  width: 1170px;
  margin: 0 auto;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
body.home div#content, body.home div#primary {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

Best Regards,
Movin

6

Hi @twygee,

I hope you are well today.

Yes we can definitely achieve what you are trying to achieve but to help keep support thread separates you should create your own thread for your question here https://colorlibsupport.com/c/dazzling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

Cheers,
Movin

7

Hello Movin,

Thanks for the help. The code works as in the image is now full width, exactly like I wanted. Looks great!
The only issue is the text above it also moved. We need that to be aligned to logo or the margin of the page (like it was earlier). Can we add something to the code to make that happen? Increasing the padding doesn’t help when the screen dimension changes.

Thanks for the support.

Regards,
Dolly

8

Hi Dolly,

Glad i could help you.

I didn’t move text above the image and it’s displaying how it was displaying before adding the custom code.

You can confirm it by temporary removing the provided custom code and see whether the text moves.

You can align the text to the logo by using the following CSS code replacing previously provided code.

body.home .row {
  width: 1170px;
  margin: 0 auto;
  max-width: 100%;

}
body.home div#content, body.home div#primary {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

Cheers,
Movin