I'm trying to make my code
<div style="margin-top: 120px; margin-bottom: 10px; margin-left: 250px; text-align: center;">
<img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY">
</div>
appear in the middle of the screen on both browser and mobile so it works on both, since when i try to go to my webpage on mobile it doesn't show up since it's not right in the middle. if that isn't possible a way to make two versions of the code 1 mobile only view and 1 browser only, since everything I've searched for this doesn't work.
link to the page: http://pafclub.bigcartel.com/entry
Related
I've added an image to the home page of my website, and it all looks good on my big screen, however, when I go to view the website from a smaller laptop, it doesn't show the image. Any tips on how to make the website more responsive, so that this image appears on all devices? (or just on the web, not too bothered about mobile)
This is the code I've used to add the image:
<h2 class="main-heading no-margin"/>
<section class="home-welcome text-center padding show-for-medium" style="padding-left: 0 !important; padding-right: 0 !important; padding-top: 0!important;">
<img src="https://i.ibb.co/KyhxHP0/Screenshot-2022-05-10-at-12-04-57.jpg" style="width: 100%;"/>
</section>
This is what I'd like the website to look like (and it does on my big mac screen):
This is what it currently looks like on a smaller screen:
The is an img surrounded by a couple of divs. it look fine on my windows pc on different browsers, it is great on my phone. However, on apple devises it stretches to huge length. Even if i go to my website though google chrome on iPhone it is still stretched.
Also I al using bootstrap. So some classes are coming from there.
<div style="width: 80px" class="mx-auto" id="about-link">
<a href="#about-link">
<p class="text-center" style="color: black; margin-bottom: 0; padding-bottom: 0.6rem; margin-top: 4rem; text-decoration: none; ">О нас</p>
<div class="w-100" style="display: flex; justify-content: center;">
<img style="width: 40px; height: auto; max-height: 100%;" src="img/icons/down.png">
</div>
</a>
</div>
No other css used. Only the one embedded into my html.
I am thinking maybe it's something to do with what apple OS is based on. Because if not - then why would it still not work on google chrome on apple devises...?
Thank you.
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I am trying to display a list of images with text on my webpage. But in IE7, it is displaying each image below the other and not next to other. Looks like it is because of lack of support of inline-block. I read some articles and added some things to my CSS, but still it is not working.
He is the HTML:
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84" height="150" src="some-image" alt="accept">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="112" height="150" src="some-image"">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="215" height="150" src="some-image">
</div>
<divclass="unaccept">
<h4>Unacceptable</h4>
<img width="165" height="150" alt="unaccept" src="some-image"">
</div>
</div>
My CSS looks like this::
.unaccept, .accept{
display: inline-block;
text-align: center;
margin: 0 0.75em;
zoom:1;//Added after reading other posts
*display:inline; //Added after reading other posts
}
I added the last two lines after reading a lot of articles/ pages about this problem. But still it is not working.
I tried adding:
*width:173px to the class accept, but then it is breaking when the image width is more, if I increase the width width of all accept classes(even where the image width is less is getting increased, so the page does not look good again).
Can someone please help me out? All I want is to display these images next to each other with their default widths.
IE7 only supports inline-block on elements that are inline by default.
Use float: left; instead, that works with following the standards, without any IE hacks:
.image_example { overflow: hidden; }
.unaccept, .accept {
float: left;
text-align: center;
margin: 0 0.75em;
}
Demo: http://jsfiddle.net/Guffa/xCREN/
I've got a logo on top of a page which has to be centered relative to the text and fixed to the top of the viewport like in this example: http://dev.markbrouwers.nl/test.html
<h1 style="width: 200px; height: 100px; margin: 0 auto;">
<img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title">
</h1>
<div style="width: 800px; margin: 0 auto;">
<p>content</p>
</div>
It works perfectly on pc's. Yet on mobile browsers when zooming the logo starts drifting away from the center.
I've read quite some things (e.g. this) about position fixed on iOS and apparently as of iOS 5 and Android 2.2 it should work, thought it doesn't... it still drifts... Does anyone know how to make mobile webkit behave like the pc browsers?
[edit]
I edited the html a bit, h1 is now outside the container
I also made a screenshot on an iPhone and Windows. As you can see the logo drifts off the viewport when you zoom in on iOS. In chrome browser it stays in the top middle of the viewport.
Safari/iOS5 screenshot:
Chrome/Win7 screenshot:
The Reason this happens, is mobile devices need to know the width of the page, even if the width of your page is 340px for e.g you will still run into this issue, it is because your ZOOMING, not resizing.
If you want text to be larger of the user, the best solution is have something like the following:
Two buttons Small / Large
then link those buttons to some javascript that then changes the text size based on what you want.
for e.g. when click large you might want it to go to 24px
and when they click small it goes to 14px.
It is simple javascript