Calc is not working everytime |
Post Reply |
Author | |
Andres
Newbie Joined: Oct 23 2014 Location: Nederland Status: Offline Points: 23 |
Post Options
Thanks(0)
Posted: Jan 04 2016 at 7:25am |
I hope someone can help me out: I'am using in a layout a textblock and a image, in a narrow window the image comes below the textblock and both needs to be centered. I use the function Calc for both the textblock and image. The textblock is nice in the middle but the image is not ? Here is an example of the code I've used:
@media (min-width: 751px) and (max-width: 850px){ .txt_welkom {top: 205px !important; height: 200px !important; width: 630px !important; left: calc(49% - 315px) !important;} .img_homepage {top: 435px !important; width: 640px !important; height: 394px !important; left: calc(50% -320px) !important;} } If you have any suggestions, please help me out. Thank you |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Hi,
It is important that you publish your website somewhere and give the link, to see what happens. Have a nice day D |
|
Andres
Newbie Joined: Oct 23 2014 Location: Nederland Status: Offline Points: 23 |
Post Options
Thanks(0)
|
It is publisched: http://test.ekvtilburg.nl/index.php
Still needs a lot of work. I hope you can find the solution. |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
What is the image in question (that is not centered)?
Could you please remove "Disable the right-click"? It doesn't really prevent from stealing your content, but the page analysis gets very incomfortable. |
|
Andres
Newbie Joined: Oct 23 2014 Location: Nederland Status: Offline Points: 23 |
Post Options
Thanks(0)
|
The richt click diabled is removed. It is the larger image with the crane (img_homepage ), the image will be smaller in size when the website is finished. When the screensize is reduced below 850px it should be centered. The 4 images below this image ( also not the final images ) should be evenly distrubed below the image. I also tried with vw instead of % but also didn't work. Good luck.
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(1)
|
For a start, correct all the calc to surround "-" with spaces:
calc(50% - 320px) !important " - 320px" not " -320px"" |
|
Andres
Newbie Joined: Oct 23 2014 Location: Nederland Status: Offline Points: 23 |
Post Options
Thanks(0)
|
Thank you very much, I overlooked this simple solution.
|
|
Andres
Newbie Joined: Oct 23 2014 Location: Nederland Status: Offline Points: 23 |
Post Options
Thanks(0)
|
For everyone who wants to use calc:
Be sure to have a fallback for older browsers , older native android browsers and opera mini. For example a size in pixels or percentage and a size in Calc. It is a little bit more work , but Calc is a function worth exlporing and can solve or improve a lot of issues. |
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |