1

I have an image on which I want to place some text. I got the text placed as I wanted by using som code which I found here on Stack Exchange. However the text moves away if I change screen size. So my question is now, how do I fix the text so that it stays put.

I have seen some talk about using background-image, but I can't get this to work.

I don't have access to any developer tools, so I am adding the code to the HTML editer on the SharePoint page

Thanks

  • Can you share your code? – newbie Aug 16 '17 at 8:19
  • 2
    You will need to understand CSS and the different ways of positioning elements in relation to other elements on the page. If the text moves when the screen size changes, then it is not relative to the correct element. – teylyn Aug 16 '17 at 8:54
1

Add some CSS to your code.

Firstly i would advise wrapping your text in a <div id="someText">

Create a class for your div where the size (width / length) is at least 5px shorter than the size of your image. (This will leave you some room for padding!)

OR

Using JQuery + javascript

<script>
function resizeText(){
    var img = document.GetElementById('Image')
    var x = img.clientHeight
    var y = img.clientWidth    
    $('#someText').style('height:' + X + ';width:' + y + ';!important')
}

$(window).resize(function(){
    resizeText()
})

</script>
  • This should resize your div size containing your text as your window is made smaller / larger. – Luke Walker Aug 16 '17 at 12:26
0

In addition to other answers, you can try using some modern CSS by implementing media queries to make your visuals change when the screen gets bigger or smaller. Try looking up "media queries" in your favorite search engine and you should get plenty of results on different usages.

Here is a simple example usage that I grabbed off of developer.mozilla.org:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.