Answered

Resizing Header to allow image to fit within whole space

(0) Share

Report

Posted on by chrisOrtiz

I am replacing a logo into a full image and needs to fit within all of the header. Now that I placed the image, the header is viewable and does not look good, image below:

I was changing the height from the Header code but nothing was changing:

And the size of the image is set to:

style="width: 100%; height: auto;">

I cant do much with the image since its already set to the limit. Can someone help me out here? I have been on here and searching for resizing on google but nothing seems to work.

Categories:

Power Apps portals

I have the same question (0)

All responses (16)

Answers (1)

v-bofeng-msft on at

Like (0)

Report
Hi @chrisOrtiz :

The key is that each container (div) has a height and a width. If you need a picture to fill your header. Then use this code directly.

<head> <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyk4WNsT-h5vXlay4iSgtFDTE_pXkz9mvFbQ&usqp=CAU" width=100%></div> </head>

Best Regards,

Bof

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

Hi @chrisOrtiz

Looks like you are using a custom portal. If you set your width to style="width: 100%; height: auto;" then in the header web template try to remove the <div> tag before <img> on line 4. Then save it.

In-studio > you have to do the sync configuration and press ctrl + F5 on your browser.

find it.

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other us

Was this reply helpful? Yes No
chrisOrtiz 75 on at

Like (0)

Report

@v-bofeng-msft I tried your code. This is what it looks like:
<div><img src="/EPSCoR1.png" width=100%> </div>
below is the result, the black space on the top is no longer there which is an improvement
@ragavanrajan I also tried your way and got the exact same results as the image above

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

@chrisOrtiz Could you please confirm the portal type. Should be fixable.

Was this reply helpful? Yes No
chrisOrtiz 75 on at

Like (0)

Report

@ragavanrajan Portal type is "Portal from blank" environment type production. Is that what you are referring too?

Was this reply helpful? Yes No
chrisOrtiz 75 on at

Like (0)

Report

Yes its Custom Portal

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

Thanks, @chrisOrtiz, The code block you are showing, is that the Header web template screenshot?

Was this reply helpful? Yes No
chrisOrtiz 75 on at

Like (0)

Report

@ragavanrajan yes hat is the code block from the Header web template

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

Thanks again. Mine is probably an upgraded portal. Header web template looks really different.

As per @v-bofeng-msft ,

In portal studio:

1. Click on the header section

2. On your left > Navigation menu > It should be in Default > Choose any navigation menu you like

3. Now click the code editor > and paste in the code which Bof as provided

4. You can see the full width of the image.

Please let us know the result.

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report
Hi @chrisOrtiz

if you still have a problem try the following code in the header section

<div class="container-fluid no-padding"> <div class="row"> <div class="col-md-12"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyk4WNsT-h5vXlay4iSgtFDTE_pXkz9mvFbQ&usqp=CAU" width=100% class="img-responsive"></div> </div> </div>

Then click on themes on your left

1. Upload custom CSS > example "custom.css"

In custom.css

.no-padding { padding-left: 0; padding-right: 0; }

3. Click save > press sync configuration > browse website.

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No