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:
Related
I'm encountering a problem with responsiveness at my site https://zaplata.sk
When I try to access a webpage from browser on my smartphone, the website is full responsive. But when I try to open it from link from messenger, it's showing something like PC version wrapped into size of mobile phone.
here i'm posting screenshots from both cases.
Accessed from smartphone browser
Accesed from redirect link from messenger
I figured it out. I have added some icons in classic webpage for PC resolutions in menu.
But, i haven't it hiden in responsive state, so i created class in CSS
#media screen and (max-width: 900px) {
.site_logos {display: none;}
}
and applied it via div
<div class="site_logos">
<p align="right">
<img style="margin : 1.5px 20px" src="https://zaplata.sk/wp-content/uploads/2018/09/fb_logo.png" width="33px"/>
<img style="margin : 1.5px 100px 0px 0px" src="https://zaplata.sk/wp-content/uploads/2018/09/instagram.png" width="33px"/>
</p></div>
and everything seems to work now :)
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
I have this webpage where there is an image on top and paragraphs on its right and bottom. This is the CSS I am using (sorry the CSS is directly in the HTML, I have to do this)
<div style="float:left" class='wrapper'>
<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
</div>
It seems to work fine even in mobiles. But I wanted to see the image centered at the top of the page when it's displayed in a mobile or tablet (smaller screens). Currently the image is close to the left side of the page when I open the website in a mobile. I wanted it aligned to the center of the page.
The picture below shows how I wanted it to be displayed in large screens and in mobiles (note that this is not exactly what happening now. the second image is what I want to achieve, but at the moment the image is closer to the left margin, and not aligned to the center)
Oh, and I can only use CSS. Is it possible?
Thank you all!
You will need to use media queries in a CSS file.
This will add properties for screens with a width lower than 640px for example.
#media screen and (max-width:640px){
img{
float:none !important;
display:block;
margin-left:auto !important;
margin-right:auto !important;
}
}
However you have to to remove float:left from the HTML and put it in a css file, otherwise the inline-style will override the media query
If you really can't modify the HTML. You should write float:none !important; in the media query write but it's a bad pratice to use !important
Update
Live example http://jsfiddle.net/7d3Lv/2/
Try resizing the Result box
I have a web page with questions on it. I want the user to be able to use a 7" Android tablet (with Chrome) to answer the questions. Some people will want to zoom. Some will not.
How can I get the div container to resize (wrapping the text inside the borders of the screen) when the user zooms in or out? I tried this:
.resizcontainer {
width: 90%;
background: #CEE;
margin: 0 auto; /* the auto value on the sides, */
}
with the top of the code as this:
<body>
<div class="resizcontainer" style="border: thin black solid">
<div class="header">
<h2>Risk Assessment Test</h2>
</div>
<div class="content">
I'm not sure if it matters, but Chrome on the desktop does the job just fine. The container resizes just fine. Or is it because this is a form???
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