Click here to Skip to main content
14,542,129 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am working on my portfolio with my very basic html and css knowledge (I don't know javascript). Gloups. You can see the live code of my website here : http://www.camillestassen.com

I am almost done, but I am still dealing with two little problems :

1) The slides of the main page won't center themselves in size 768px+ (they stay on the left). I created a pen in codepen with the code : https://codepen.io/lumofa/pen/mdyxNWy

2) In the tab paintings, the title of my images (in the fancybox, click on the picture) is too big in size 'phone screen'. I would like it to go into 2 lines but I don't want to use a <br> because then it would be in 2 lines when the size is 768+ as well, which is not necessary. I didn't create a pen for this one : you can find it by clicking on an image (phone size) here : https://www.camillestassen.com/paintings

If you have any idea on how to help me, I would feel very grateful!

I am also willing to give you any extra info/code/whatever you might need ; if I didn't put needed info in this post, it is because I don't know that it was needed.

Thank you!

Camille

<div id="wrap">
<ul class="rslides">
<li><img src="http://www.camillestassen.com/images/quetzal2019.png"></li>
<li><img src="http://www.camillestassen.com/images/sham2019.png"></li>
<li><img src="http://www.camillestassen.com/images/freestyle2019.png"></li>
<li><img src="http://www.camillestassen.com/images/frenchkiss2018.png"></li>
<li><img src="http://www.camillestassen.com/images/tinhat2019.png"></li>
</ul>
</div>


.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 70px 0 0 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height:auto;
  float: left;
  width: 100%;
  border: 0;
  }

@media only screen and ( min-width: 768px ){
	.rslides{
		width:100%;
		margin:0 auto;
		text-align:center;
	}
	.rslides img {
		max-height:580px;
		width:auto;
		text-align:center;
		margin:0 auto;
	}
	.rslides li{
		width:100%;
		margin:0 auto;
	}


 (function(c,K,C){c.fn.responsiveSlides=function(m){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},m);return this.each(function(){C++;var f=c(this),u,t,v,n,q,r,p=0,e=f.children(),D=e.length,h=parseFloat(a.speed),E=parseFloat(a.timeout),w=parseFloat(a.maxwidth),g=a.namespace,d=g+C,F=g+"_nav "+d+"_nav",x=g+"_here",k=d+"_on",
y=d+"_s",l=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),z={"float":"left",position:"relative",opacity:1,zIndex:2},A={"float":"none",position:"absolute",opacity:0,zIndex:1},G=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;u=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<u.length;c++)if("string"===typeof b[u[c]+a])return!0;return!1}(),B=function(b){a.before(b);G?(e.removeClass(k).css(A).eq(b).addClass(k).css(z),
p=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(k).css(A).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(k).css(z);a.after(b);p=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-.5}),f.empty().append(e));e.each(function(a){this.id=y+a});f.addClass(g+" "+d);m&&m.maxwidth&&f.css("max-width",w);e.hide().css(A).eq(0).addClass(k).css(z).show();G&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.length){if(E<h+100)return;if(a.pager&&!a.manualControls){var H=[];e.each(function(a){a+=1;H+="<li><a href='#' class='"+y+a+"'>"+a+"</a></li>"});l.append(H);m.navContainer?c(a.navContainer).append(l):f.after(l)}a.manualControls&&(l=c(a.manualControls),l.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&l.find("li").each(function(a){c(this).addClass(y+(a+1))});if(a.pager||a.manualControls)r=
l.find("a"),t=function(a){r.closest("li").removeClass(x).eq(a).addClass(x)};a.auto&&(v=function(){q=setInterval(function(){e.stop(!0,!0);var b=p+1<D?p+1:0;(a.pager||a.manualControls)&&t(b);B(b)},E)},v());n=function(){a.auto&&(clearInterval(q),v())};a.pause&&f.hover(function(){clearInterval(q)},function(){n()});if(a.pager||a.manualControls)r.bind("click",function(b){b.preventDefault();a.pauseControls||n();b=r.index(this);p===b||c("."+k).queue("fx").length||(t(b),B(b))}).eq(0).closest("li").addClass(x),
a.pauseControls&&r.hover(function(){clearInterval(q)},function(){n()});if(a.nav){g="<a href='#' class='"+F+" prev'>"+a.prevText+"</a><a href='#' class='"+F+" next'>"+a.nextText+"</a>";m.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),I=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+k);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<D?p+1:0;B(c(this)[0]===I[0]?b:d);(a.pager||a.manualControls)&&t(c(this)[0]===I[0]?b:d);a.pauseControls||n()}});
a.pauseControls&&d.hover(function(){clearInterval(q)},function(){n()})}}if("undefined"===typeof document.body.style.maxWidth&&m.maxwidth){var J=function(){f.css("width","100%");f.width()>w&&f.css("width",w)};J();c(K).bind("resize",function(){J()})}})}})(jQuery,this,0);


What I have tried:

For both of them, I tried giving them a width, max-width, margin:0 auto and text-align:center.
Posted
Updated 10-Jan-20 5:23am
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 2

Problem 1:
Remove float: left; from the .rslides img rule to center the images.
.rslides img {
  display: block;
  height:auto;
  /* float: left; */
  width: 100%;
  border: 0;
}
https://codepen.io/RichardD2/pen/PoweNpJ[^]

Problem 2:
The .fancybox-title-float-wrap .child rule has white-space: nowrap;, which prevents the title from wrapping onto a new line.

You need to override that rule, either for all breakpoints, or just for small screens.
@media only screen and ( max-width: 767px ) {
    .fancybox-title-float-wrap .child {
        white-space: normal;
    }
}
white-space - CSS: Cascading Style Sheets | MDN[^]
   
Comments
lumofa 10-Jan-20 12:52pm
   
It worked!!! Thank you so much. I wish you a wonderful weekend.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100